リスト要素の項目を横並びにする（ウィンドウ幅に応じて折り返し方を変える）

リスト要素の項目を横並びにする で、ウィンドウ幅に応じて折り返し方を変える方法。

具体的には、ウィンドウ幅が狭い場合は折り返さない。ウィンドウ幅がある程度広い場合は折り返したい場合、下記のように指定する。

デモページを表示

CSS

補足

• ４行目：折り返さない場合の li 要素の幅（列数）を指定。
• ８行目以降：ウィンドウ幅が 640px 以上のときの、折り返しと寄せる方向、表示列数を指定。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• １行目：ウィンドウ幅が 640px 未満のとき、折り返さないので data-flex-wrap="nowrap" を設定。

関連投稿

• リスト要素の項目を横並びにする
• リスト要素の項目を横並びにする（ウィンドウ幅に応じて項目の幅を変える方法）

リスト要素の項目を横並びにする（ウィンドウ幅に応じて項目の幅を変える方法）

リスト要素の項目を横並びにする で、ウィンドウ幅に応じて項目の幅（列数）を変える方法。

具体的には、スマートフォンでは２列、タブレットでは３列、パソコンでは５列表示にする場合、以下のように指定する。

デモページを表示

CSS

補足

• CSS の個別定義で、ウィンドウ幅ごとに、メディアクエリを使って li 要素の幅（列数）を指定する。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

関連投稿

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

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

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

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

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

デモページを表示

CSS

補足

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

HTML

補足

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

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