Flex布局简单总结

复习到flex，总结一下方便查看

容器的属性

以下6个属性设置在容器上。

属性	描述	值
flex-direction	决定主轴的方向（即项目的排列方向）。	row(默认值) , row-reverse , column , column-reverse
flex-wrap	定义如何换行。	nowrap(默认值), wrap , wrap-reverse
flex-flow	flex-direction 和 flex-wrap 的简写	row nowrap(默认值)
justify-content	定义主轴对齐方式	flex-start(默认值) , flex-end , center , space-between , space-around
align-items	定义交叉轴对齐方式	flex-start , flext-end , center , baseline , stretch(默认值)
align-content	存在两条轴线时，定义交叉轴对齐方式，如果项目只有一根轴线，该属性不起作用。	flex-start , flex-end , center , space-between , space-around , stretch(默认值)

项目的属性

以下6个项目设在在项目上

属性	描述	值
order	定义项目的排列顺序。数值越小，排列越靠前，默认为0。	<integer>
flex-grow	定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大	<integer>
flex-shrink	定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。	<number>(负值无效)
flex-basis	在分配多余空间之前，项目占据的主轴空间	<length> , auto
flex	flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选，快捷键：auto (1 1 auto) 和 none (0 0 auto)	none ，auto, [ <'flex-grow'> <'flex-shrink'> <'flex-basis'> ]
aligh-self	允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。	auto , flex-start , flex-end , center , baseline , stretch