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

flex-direction:フレックス・アイテムの配列順序CSS3で追加

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

プロパティについて

概要

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

flex-direction”プロパティはフレキシブルボックスレイアウトで主軸の向きを設定し、フレックス・アイテムの配置方法を指定するプロパティです。

フレックス・アイテムはフレックス・コンテナの主軸の方向に従って配列されます。

flex-direction”プロパティはwriting-mode”プロパティdirection”プロパティdir”属性による書字方向の影響を受けます。

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

サンプルコード

div { flex-direction: row;}

説明
row フレックス・コンテナの主軸の向きは書字方向のインライン軸と同じです (書字方向が左から右の横書きの場合には主軸は水平で左から右方向です。)
row-reverse フレックス・コンテナの主軸の向きは書字方向のインライン軸と逆向きです (書字方向が左から右の横書きの場合には主軸は水平で右から左方向です。)
column フレックス・コンテナの主軸の向きは書字方向のブロック軸と同じです (書字方向が左から右の横書きの場合には主軸は垂直で上から下方向です。)
column-reverse フレックス・コンテナの主軸の向きは書字方向のブロック軸と逆向きです (書字方向が左から右の横書きの場合には主軸は垂直で下から上方向です。)
共通キーワード

仕様書

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

使用例

主軸をインライン軸方向にする

<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-direction: row;
}

黒猫

白猫

三毛猫

茶トラ猫

.flex-contain {
display: flex;
flex-direction: row-reverse;
}

黒猫

白猫

三毛猫

茶トラ猫

主軸をブロック軸方向にする

<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-direction: column;
}

黒猫

白猫

三毛猫

茶トラ猫

.flex-contain {
display: flex;
flex-direction: column-reverse;
}

黒猫

白猫

三毛猫

茶トラ猫

縦書きの場合

<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;
writing-mode: vertical-rl;
flex-direction: row;
}

黒猫

白猫

三毛猫

茶トラ猫

.flex-contain {
display: flex;
writing-mode: vertical-rl;
flex-direction: column;
}

黒猫

白猫

三毛猫

茶トラ猫

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