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

flex-flow:フレックス・アイテムの配列方法CSS3で追加

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

プロパティについて

概要

初期値 flex-direction: row;
flex-wrap: nowrap;
適用対象 フレックス・アイテム
継承 しない
パーセント値 パーセント値は指定できません
計算値 一括指定が対象とする各プロパティの定義に依る
アニメーション 一括指定が対象とする各プロパティの定義に依る

flex-flow”プロパティはフレキシブルボックスレイアウトでフレックス・アイテムの主軸の向きと、フレックス・アイテムを複数行に配列するかどうかを指定する以下のプロパティの一括指定プロパティです。

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

サンプルコード

div { flex-flow: row wrap;}

値は<'flex-direction'><'flex-wrap'>をそれぞれ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-flow: row wrap;
}

黒猫

白猫

三毛猫

茶トラ猫

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