<div> 要素内のフレックスアイテムの方向を逆順に設定します：
div
{
display: -webkit-flex; /* Safari */
-webkit-flex-direction: row-reverse; /* Safari 6.1+ */
display: flex;
flex-direction: row-reverse;
}
Try it Yourself ❯
flex-direction プロパティは、フレックスアイテムの方向を指定します。
注: 要素がフレックスアイテムでない場合、flex-direction プロパティの効果はありません。
| デフォルト値： | row |
|---|---|
| 継承： | 継承する |
| アニメーション可否： | 不可。animatable を参照 |
| バージョン： | CSS3 |
| JavaScript 構文： | object.style.flexDirection="column-reverse" Try it |
表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。
-webkit-、-moz- の後に続く数字 は、接頭辞付きで動作した最初のバージョンです。
| プロパティ | |||||
|---|---|---|---|---|---|
| flex-direction | 29.0 21.0 -webkit- |
11.0 | 28.0 18.0 -moz- |
9.0 6.1 -webkit- |
17.0 |
flex-direction: row|row-reverse|column|column-reverse|initial|inherit;
| 値 | 説明 | Play it |
|---|---|---|
| row | デフォルト値。フレックスアイテムは行として、横方向に表示されます | Play it ❯ |
| row-reverse | row と同じですが、逆順に表示されます | Play it ❯ |
| column | フレックスアイテムは列として、縦方向に表示されます | Play it ❯ |
| column-reverse | column と同じですが、逆順に表示されます | Play it ❯ |
| initial | プロパティにデフォルト値を設定します。initial を参照 | Play it ❯ |
| inherit | このプロパティは親要素を継承します。inherit を参照 |
CSSリファレンス：flex-flow プロパティ
CSSリファレンス：flex-wrap プロパティ
CSSリファレンス：flex プロパティ
CSSリファレンス：flex-grow プロパティ
CSSリファレンス：flex-shrink プロパティ
CSSリファレンス：flex-basis プロパティ
HTML DOM リファレンス：flexDirection プロパティ