List group (リストグループ)

使い方

  1. 通常のb-listgroupは、PC：縦に並ぶ　SP：横に並び
  2. b-listgroup b-listgroupHorizontalは、PC：横に並ぶ　SP：縦に並び

画面表示

  • 縦アイテム1
  • 縦アイテム2
  • 横アイテム1
  • 横アイテム2

HTML/CSS（Sass）

<ul class="b-listgroup">
 <li class="b-listgroup-item">
  縦アイテム1
 </li>
 <li class="b-listgroup-item">
  縦アイテム2
 </li>
</ul>

<ul class="b-listgroup b-listgroupHorizontal">
 <li class="b-listgroup-item">
  横アイテム1
 </li>
 <li class="b-listgroup-item">
  横アイテム2
 </li>
</ul>
.b-listgroup {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (min-width: 768px) {
  .b-listgroup {
    flex-direction: column;
  }
  .b-listgroupHorizontal {
    flex-direction: row;
  }
}
@media screen and (max-width: 767px) {
  .b-listgroup {
    flex-direction: row;
  }
  .b-listgroupHorizontal {
    flex-direction: column;
  }
}

.b-listgroup {
    display: flex;
　　 flex-wrap: wrap;
    @include mq(pc) {
        flex-direction: column;
    }
    @include mq(sp) {
        flex-direction: row;
    }
    &Horizontal {
        @include mq(pc) {
            flex-direction: row;
        }
        @include mq(sp) {
            flex-direction: column;
        }
    }
}
TOP