【flexbox】flexwrapでアイテムを複数行に並べる方法

2021/12/03

PC全般

t f B! P L

flexboxでは、並べられた各要素を一列に配置します。デフォルトの状態だと改行されずに各要素が小さくなって表示されてしまいます。

今回ご紹介する flex-wrap は収まりきらない要素を折り返して、複数行で表示する方法です。

以下で実際に見ていきましょう。


【flex-wrap】要素を複数行で表示する

flex-wrap: nowrap

(※HTML、CSS、RESULTのボタンを押すと表示が切り替わります)

これはデフォルトの状態と同じです。各要素を小さくしてまでも横一列に表示させます。

なので幅が足りない場合には、各要素はつぶれてしまいます。


flex-wrap: wrap

See the Pen wrap by taichi (@taichi_na) on CodePen.

最初の行に入りきらなかった分は、改行されています。

形を崩さずにデバイスの大きさに応じて改行してくれるので、PCだと1行でスマホだと3行といった具合に、このままでもレスポンシブとなりますね。便利!


flex-wrap: wrap-reverse

See the Pen wrapreverse by taichi (@taichi_na) on CodePen.

複数行表示かつ、スタートの位置が左下に変わりました。

まとめ:自動改行させたいときは flex-wrap プロパティ

今回見てきたように、flex-wrap プロパティを使えば、要素の形を崩さずに自動で改行をしてくれます。使い方によってはとても便利な機能なので、レイアウトの際には積極的に使てみてください。

ちなみに、古いAndroid(4.0~4.3)では使うことができませんのでご注意ください。

次回は flex-wrap 状態の各要素の配置について勉強してみましょう。


1981年生まれ。北海道在住。現在無職でアルバイトをしながらプログラミングを勉強中。木工を長らくしていたのでそちらの知識と技能はあります。ミニマリスト/ヴィーガン/アフリカに4年

カテゴリー別に記事を探す

このブログを検索

Contact

名前

メール *

メッセージ *

QooQ

TOP