最終更新日

flex-wrapプロパティ

flex-wrapは、フレキシブルボックスをマルチラインにするプロパティです。

フレキシブルボックス内のボックスの配置方法を指定する場合は、flex-directionを使用します。

flex-directionとflex-wrapの値をまとめて指定する場合は、flex-flowを使用します。

CSS3での変更点
・flex-wrapは、CSS3から新しく追加されたプロパティです。
初期値 適用先 継承
nowrap display: flex;」か「display: inline-flex;」が指定された要素 なし
説明
nowrap 通常どおり、フレキシブルボックスをシングルラインにします。(初期値
wrap フレキシブルボックスをマルチラインにします。コンテンツの書字方向に沿ってフレキシブルボックスの開始側から末尾側へと斜めにボックスの配置軸が設定されます。
wrap-reverse wrapと同じだが、フレキシブルボックスの末尾側から開始側へと逆向きの斜めにボックスの配置軸が設定されます。
サンプルコード
flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
参考文献:CSS Flexible Box Layout Module外部リンク
HOME