lab: リスト要素の項目を横並びにする

CSS Flexbox を使用して、リスト要素の項目を横並びにする方法です。

カスタムデータ属性で、折り返す（左寄せ｜中央寄せ｜右寄せ）・折り返さないの指定ができるようにしています。

折り返さない場合、ブラウザが対応していれば、スクロール時に項目単位で止まります（スクロールスナップ）。

CSS

/* 共通定義 */
 
ul[data-flex-wrap] {
  display: flex;                  /* flexコンテナ */
  overflow: auto;                 /* スクロールバーを自動表示する */
  scroll-snap-type: x mandatory;  /* for リスト要素の項目単位でスクロール */
}
 
ul[data-flex-wrap="left"] {
  flex-wrap: wrap;                /* 折り返す */
  justify-content: flex-start;    /* 左寄せ */
}
 
ul[data-flex-wrap="center"] {
  flex-wrap: wrap;                /* 折り返す */
  justify-content: center;        /* 中央寄せ */
}
 
ul[data-flex-wrap="right"] {
  flex-wrap: wrap;                /* 折り返す */
  justify-content: flex-end;      /* 右寄せ */
}
 
ul[data-flex-wrap="nowrap"] {
  flex-wrap: nowrap;              /* 折り返さない */
  justify-content: flex-start;    /* 左寄せ */
}
 
ul[data-flex-wrap] > li {
  flex: none;                      /* flexアイテムの伸長・収縮指定 */
  width: 33.3%;                    /* flexアイテムの幅【初期値：３列表示】 */
  scroll-snap-align: start;        /* for リスト要素の項目単位でスクロール */
}
 
/* 個別定義 */
 
#container ul[data-flex-wrap] > li {
  width: 25%;                      /* flexアイテムの幅を上書き設定（４列表示） */
}

補足

個別定義として、li 要素の幅を指定する（指定が無い時は３列表示）。
レイアウトが崩れる場合はリセットCSS・共通CSS の内容を確認。

HTML

<ul data-flex-wrap="left">
  <li><span class="button">新着情報</span></li>
  <li><span class="button">商品</span></li>
  <li><span class="button">キャンペーン</span></li>
  <li><span class="button">資料請求</span></li>
  <li><span class="button">企業情報</span></li>
  <li><span class="button">お問い合わせ</span></li>
</ul>

補足

ul 要素に "data-flex-wrap" を追加し、折り返し方法を指定する。
このサンプルでは li 要素の中にボタンを入れているが、画像やテキストでも良い。

data-flex-wrap	折り返し方法
left	折り返す：左寄せ
center	折り返す：中央寄せ
right	折り返す：右寄せ
nowrap	折り返さない

2020年10月30日金曜日

リスト要素の項目を横並びにする

CSS

補足

HTML

補足