備忘録的プログラミングリファレンス

flex-direction プロパティ

　flex-direction プロパティは、エレメントのレイアウトのための display:flex; において、子エレメントの並びの主軸方向を指定するプロパティです。
　並びとしては横並び（row）とその逆順、縦並び（column）とその逆順が設定できます。

フレックスアイテムの並びを縦に（Exampleを参照）
div{
	display:flex;
	flex-direction: column;
}

詳しくは Example を参照してください

　 display:flex; が設定されたエレメントをフレックスコンテナといいます子エレメントをフレックスアイテムといいます。子エレメントの並びのことをフレックスラインといいます。

　並びの方向である flex-direction プロパティと flex-flow、表示しきれない場合の折返しである flex-wrap プロパティを一括で指定するには flex-flow を使います。

display: flex; における並びの基準

　display: flex; では表示基準が設けられています。この表示基準に基づいて関連プロパティを設定することができます。

   1       2       3       4  　→main axis（主軸）
1 ┏━━━┳━━━┳━━━┳
  ┃     ┃     ┃     ┃
2 ┣━━━╋━━━╋━━━╋
  ┃     ┃     ┃     ┃
3 ┣━━━╋━━━╋━━━╋
  ┃     ┃     ┃     ┃
4 ┣━━━╋━━━╋━━━╋

↓
cross axis
（交差軸）

ページ内 Index

構文(Syntax)

CSS

flex-direction: row | row-reverse | column | column-reverse | initial | inherit ;

DOM ( JavaScript )

値の取得
String = object.style.flexDirection;
値の設定
object.style.flexDirection=" row | row-reverse | column | column-reverse | initial | inherit ";

値（Values）

Value摘要
row初期値（default値）、横並び
row-reverse横並びで逆順
column縦並び
column-reverse縦並びで逆順
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考（Remarks）

初期値（Default value）row
継承（Inherited）No
CSS AnimationNo

Example

　flex-directionの例です。フレックスアイテムを縦方向に並べる指定をしています。

　flex-wrapプロパティを指定しないために、フレックスアイテムがフッレクスコンテナ内で収まるように自動で幅が調整されています。 その場合はフレックスアイテムに設定されたwidth値は機能しないようです。

関連するプロパティ

　display: flex; には以下の関連するプロパティがあります。これらを使って大きさや配置を調整します。

プロパティ概要
flex-basisフレックスアイテムの基本となる幅
align-contentフレックスラインの垂直方向の配置
align-items初期の配置位置
align-selfフレックスアイテムの配置位置
justify-content主軸方向での配置を指定
flex-wrap横並びにしたフレックスアイテムの折り返し
flex-directionフレックスアイテムの縦または横の並び
flex-flowflex-direction、flex-wrapを一括指定
orderフレックスアイテムの順序を変更

関連（Related）