Mar. 23rd,2021
プロパティについて
＃
概要
“flex-direction”プロパティはフレキシブルボックスレイアウトで主軸の向きを設定し、フレックス・アイテムの配置方法を指定するプロパティです。
フレックス・アイテムはフレックス・コンテナの主軸の方向に従って配列されます。
“flex-direction”プロパティは“writing-mode”プロパティや“direction”プロパティ、“dir”属性による書字方向の影響を受けます。
サンプルコード
div { flex-direction: row;}
＃
値
| 値 | 説明 |
|---|---|
| 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;
}
黒猫
白猫
三毛猫
茶トラ猫
