最終更新日 2021年6月19日

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;

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。