flex-direction
flex-direction プロパティはフレックスアイテムの配置方向（並べる方向）を指定します。右から左へ、下から上へといった指定が可能になります。
プロパティの詳細
- 値
- row, row-reverse, column, column-reverse
- 初期値
- row
- 対象
- フレックスコンテナ
- 継承
- しない
- CSS レベル
- CSS3 （CSS Flexible Box Layout Module）
値の詳細
- row
- 日本語のように左から右へ横書きをする場合、フレックスコンテナの軸は水平に、フレックスアイテムは左から右へ配置されます。
- row-reverse
- フレックスコンテナの軸は row と同じように配置されますがフレックスアイテムは逆方向に配置されます。日本語であれば右から左へ配置されることになります。
- column
- フレックスコンテナの軸はブロック要素の並ぶ方向と同じになります。基本は縦方向になります。フレックスアイテムは上から下へ配置されます。
- column-reverse
- フレックスコンテナの軸は column と同様です。フレックスアイテムの並びは下から上へ配置されます。
サンプル
.item {
display: flex;
flex-direction: row-reverse;
}