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

上から下

item 1

item 2

item 3

item 4

item 5

item 6

item 7

右から左(右寄せ)

item 1

item 2

item 3

item 4

item 5

item 6

item 7

下から上

item 1

item 2

item 3

item 4

item 5

item 6

item 7

【CSS】

CSS3逆引きリファレンス一覧へ戻る