Container
flex-direction: row | row-reverse | column | column-reverse;
flexDirection: 'row' | 'row-reverse' | 'column' | 'column-reverse'
flex-wrap: nowrap | wrap | wrap-reverse;
flexWrap: 'nowrap' | 'wrap' | 'wrap-reverse'
justify-content: flex-start | flex-end | center | space-between | space-around;
justifyContent: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around'
align-items: flex-start | flex-end | center | baseline | stretch;
alignItems: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
alignContent: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'stretch'
flex-direction
itemsを配置していく方向を指定。
initial: row
row | row-reverse | column | column-reverse
row
flex-direction: row;
flexDirection: 'row',
row-reverse
flex-direction: row-reverse;
flexDirection: 'row-reverse',
column
flex-direction: column;
flexDirection: 'column',
column-reverse
flex-direction: column-reverse;
flexDirection: 'column-reverse',
flex-wrap
itemsの折り返し方を指定。
initial: nowrap
nowrap | wrap | wrap-reverse
nowrap
flex-wrap: nowrap;
flexWrap: 'nowrap',
wrap
flex-wrap: wrap;
flexWrap: 'wrap',
wrap-reverse
flex-wrap: wrap-reverse;
flexWrap: 'wrap-reverse',
justify-content
itemsの横方向の整列を指定。
initial: flex-start
flex-start | flex-end | center | space-between | space-around
flex-start
justify-content: flex-start;
justifyContent: 'flex-start',
flex-end
justify-content: flex-end;
justifyContent: 'flex-end',
center
justify-content: center;
justifyContent: 'center',
space-between
justify-content: space-between;
justifyContent: 'space-between',
space-around
justify-content: space-around;
justifyContent: 'space-around',
align-items
itemsの縦方向の整列を指定。
initial: stretch
flex-start | flex-end | center | baseline | stretch
flex-start
align-items: flex-start;
alignItems: 'flex-start',
flex-end
align-items: flex-end;
alignItems: 'flex-end',
center
align-items: center;
alignItems: 'center',
baseline
align-items: baseline;
alignItems: 'baseline',
stretch
align-items: stretch;
alignItems: 'stretch',
align-content
縦方向にitemをどのように配置していくかを指定。
initial: stretch
flex-start | flex-end | center | space-between | space-around | stretch
flex-start
align-content: flex-start;
alignContent: 'flex-start',
flex-end
align-content: flex-end;
alignContent: 'flex-end',
center
align-content: center;
alignContent: 'center',
space-between
align-content: space-between;
alignContent: 'space-between',
space-around
align-content: space-around;
alignContent: 'space-around',
stretch
align-content: stretch;
alignContent: 'stretch',
flex-flow
flex-directionとflex-wrapのショートハンド。
initial: row nowrap
Items
flex-grow: <num>;
flexGrow: <num>,
flex-shrink: <num>;
flexShrink: <num>,
flex-basis: auto | <width>;
flexBasis: 'auto' | <width>,
align-self: auto | flex-start | flex-end | center | baseline | stretch;
alignSelf: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch',
order: <num>;
order: <num>,
flex-grow
itemsの伸びる倍率。(grow:伸びる、増える、育つ)
1以上を指定するとcontainerいっぱいに広がるように伸びる。
<num>が大きいほど幅が大きくなる。
0はオリジナルの幅。
initial: 0
flex-grow: <num>;
flexGrow: <num>,
flex-shrink
itemsの縮む倍率。(shrink:縮む)
containerの幅が縮まる時のitemsの縮む割合を指定できる。
<num>が大きいほど幅が狭くなる。
0はオリジナルの幅。縮まない。
initial: 1
flex-shrink: <num>;
flexShrink: <num>,
flex-basis
flex-itemsは他プロパティで比率が指定されている時、widthプロパティが無視される。
このプロパティを使うと幅を指定出来る。
initial: auto
flex-basis: auto | <width>;
flexBasis: 'auto' | <width>,
align-self
align-itemsはcontainerに指定した子要素の縦方向の整列をコントロールするのに対し、align-selfはitems自体に指定して縦方向の整列をコントロールする。
initial: auto
align-self: auto | flex-start | flex-end | center | baseline | stretch;
alignSelf: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch',
flex(Shorthand)
flex-grow, flex-shrink, flex-basisのショートハンド。
initial: 0 1 auto
initial(flex: 0 1 auto) | auto(flex: 1 1 auto) | none(flex: 0 0 auto)
order
flex-itemsの順番を指定た数字の順番に並べ替える事が出来る。
initial: 0
order: <num>;
order: <num>,
