CSS flex-direction| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル
ページコンテンツ
flex-direction CSS プロパティとは
トピック：フレックスコンテナの主軸の方向を設定することによって、フレックスアイテムがフレックスコンテナにどのように配置されるかを指定する事ができる
プロパティ flex-direction
- 基本 書式：セレクタ {
flex-direction:値;}実例 コード 1
<div>要素内のflex アイテムの方向を逆の順序で設定する サンプル コードを試すdiv{
display: -webkit-flex;
/* Safari */
-webkit-flex-direction: row-reverse;
/* Safari 6.1+ */
display: flex;
flex-direction: row-reverse;
}
プロパティ 定義と使用法
| デフォルト値・初期値 : | row |
|---|---|
| 適用対象 : | flex containers |
| 継承 : | 不可 |
| メディア : | visual |
| 計算値 : | 指定値 |
CSS Version | CSS3 |
| アニメーションの種類 : | 個別 アニメーション可能なプロパティ 一覧 |
| JavaScript 構文 | object.style.flexDirection="funWebref" |
| 正規順序 : | 形式文法で定義される一意のあいまいでない順序 |
| CSSの構文 | flex-direction: row | row-reverse | column | column-reverse | initial | inherit; |
プロパティ値
| 値 | 説明 |
|---|---|
row | フレックスコンテナの主軸は、現在の書込みモード（テキスト方向）のインライン軸と同じ向きになる デフォルト値 |
row-reverse | 行と同じ が、軸の開始点と終了点が逆転する |
column | フレックスコンテナの主軸は、現在のテキスト方向のブロック軸（水平書き込みモードの垂直軸と垂直書き込みモードの水平軸）と同じ向きになる |
column-reverse | 列と同じ が、軸の開始点と終了点が逆になる |
inherit | このプロパティをデフォルト値に設定する |
inherit | 親要素からこのプロパティを継承する |
サポートするデスクトップ ブラウザ対応・互換性
| 機能 | Firefox | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | 18.0 (18.0)[1] 20.0 (20.0) 28.0 (28.0)[2] | 21.0-webkit | 10 -ms 11 | 12.10 | 7 -webkit |
サポートするモバイル ブラウザ対応・互換性
| 機能 | Firefox Mobile | Android | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | 不明 | 不明 | サポートなし✖ | 12.10 | 未サポート |
