このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

flex-wrap:フレックス・アイテムを複数行に配列CSS3で追加

記事Mar. 23rd,2021
フレキシブルボックスレイアウトでフレックス・アイテムを複数行に配列するかどうかを指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 flex-wrap: nowrap;
適用対象 フレックス・コンテナ
継承 しない
パーセント値 パーセント値は指定できません
計算値 指定されたキーワード
アニメーション 離散

flex-wrap”プロパティはフレキシブルボックスレイアウトでフレックス・アイテムを1行に配列するのか、それとも複数行に配列するのかを指定するプロパティです。

フレックス・アイテムがフレックス・コンテナに収まりきらない場合でも既定では1行に配列されてフレックス・コンテナからはみ出しますが、“flex-wrap”プロパティによる指定で折り返して複数行に配列することもできます。

フレキシブル・ボックス・レイアウト

サンプルコード

div { flex-wrap: wrap;}

説明
row フレックス・アイテムは1行に配列されます (フレックス・コンテナ内の領域が足りない場合にはあふれる場合があります。)
wrap フレックス・アイテムは複数行に配列されます (フレックス・コンテナ内の領域が足りない場合には折り返して配列します。)
wrap-reverse フレックス・アイテムは複数行に配列されます (“wrap”と同じですが交差軸の方向が逆向きになり、折り返した次の行は逆側に配置されます。)
共通キーワード

仕様書

Level 1
作業草稿(WD)
flex-wrap
定義あり
Level 1
勧告候補(CR)
nowrap
定義あり
wrap
定義あり
wrap-reverse
定義あり

使用例

フレックス・アイテムを1行に配列する

<div class="flex-contain">
<p class="item-1">
黒猫
</p>

<p class="item-2">
白猫
</p>

<p class="item-3">
三毛猫
</p>

<p class="item-4">
茶トラ猫
</p>
</div>
.flex-contain {
display: flex;
flex-wrap: nowrap;
}

黒猫

白猫

三毛猫

茶トラ猫

フレックス・アイテムを複数行に配列する

<div class="flex-contain">
<p class="item-1">
黒猫
</p>

<p class="item-2">
白猫
</p>

<p class="item-3">
三毛猫
</p>

<p class="item-4">
茶トラ猫
</p>
</div>
.flex-contain {
display: flex;
flex-wrap: wrap;
}

黒猫

白猫

三毛猫

茶トラ猫

.flex-contain {
display: flex;
flex-wrap: wrap-reverse;
}

黒猫

白猫

三毛猫

茶トラ猫

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク