Flexアイテムの向きと方向
Flexアイテムの向きと方向を変更する場合は、flex-directionプロパティ（旧仕様ではbox-directionプロパティ、box-orientプロパティ）を使用します。
なお、flex-directionプロパティはショートハンドであるflex-flowプロパティの1番目の指定にあたります。
- ※ 旧仕様では、box-orientで向き、box-directionで方向を制御します。
構文
flex-direction:方向;指定可能な値
| 向きと方向 | 標準仕様 | 旧仕様 |
|---|---|---|
| 横向き（左から右へ）初期値 | flex-direction : row | box-direction : normal, box-orient : horizontal |
| 横向き（右から左へ） | flex-direction : row-reverse | box-direction : reverse, box-orient : horizontal |
| 縦向き（上から下へ） | flex-direction : column | box-direction : normal box-orient : vertical |
| 縦向き（下から上へ） | flex-direction : column-reverse | box-direction : reverse box-orient : vertical |
サンプルコード
item 1
item 2
item 3
item 4
item 5
item 6
item 7
CSS
div.flexbox-container {
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-direction:normal;
-moz-box-direction:normal;
-webkit-box-orient:vertical;
-moz-box-orient:vertical;
-webkit-flex-direction:column;
-moz-flex-direction:column;
flex-direction:column;
}シミュレーション
- 1
- 2
- 3
- 4
- 5
- 6
- 7