スポンサーリンク
スポンサーリンク

フレックスコンテナでアイテムを複数行に配置する

フレックスコンテナ内の全てのフレックスアイテムは、1行で配置されますが、flex-wrapプロパティを利用すると、コンテナ内のアイテムを、複数行に配置できます。
フレックスアイテムが複数の行に分割されると、それぞれの行は独立して配置されます。

flex-wrapプロパティ
設定値 説明
nowrap フレックスコンテナ内は一行になります。フレックスアイテムは、flex-directionプロパティの値で指定されたレイアウト方向に1行で配置されます。
wrap フレックスコンテナ内に複数行配置できるようにします。フレックスアイテムは、flex-directionプロパティの値で指定されたレイアウト方向で配置し、交差軸の終端の方向へ折り返されていきます。
wrap-reverse フレックスコンテナ内の複数行配置できるようにしますが、折り返しが「wrap」とは逆になります。フレックスアイテムは、flex-directionプロパティの値で指定されたレイアウト方向で配置されながら、交差軸の始端方向へ折り返されます。

始端と終端

フレックスコンテナやフレックスアイテムには、レイアウトの方向に応じた始端と終端というものがあります。私が学習した知識で説明すると、始端は1番初めにフレックスアイテムが置かれたところで、終端は、フレックスアイテムが最後に置かれたところです。

サンプルコードの実行結果はこちら

レイアウトの方向と行数を一括指定

したいときは、flex-flowプロパティを使います。
「flex-flow:flex-directionの値 flex-wrapの値;」と指定します。

コメント

タイトルとURLをコピーしました