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

flex-direction プロパティ

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

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

  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値は機能しないようです。