Flex布局

flex概述（容器，项目）（主轴，交叉轴）

容器的属性

flex-direction 定义主轴方向

row | row-reverse | column | column-reverse

flex-wrap 是否换行

nowrap | wrap | wrap-reverse

flex-flow 是flex-deriction和flex-wrap属性的简写

默认值为[row nowrap]

justify-content 主轴上对齐方式

flex-start | flex-end | center | space-between | space-around

align-items 交叉轴上对齐方式

flex-start | flex-end | center | baseline | stretch

align-content 多轴线上的对齐方式

stretch (默认值) | center | flex-start | flex-end | space-between | space-around;

项目的属性

order 排列顺序 默认0，越小越靠前

flex-grow 有剩余空间放大比例，默认0（不放大）

flex-shrink 空间不够时缩小比例，默认1（自动缩小）。0：不缩小

flex-basis 属性表示表示项目占据主轴空间的值,，默认为auto，表示项目当前默认的大小。

如果设置为一个固定的值，则该项目在容器中占据固定的大小。

flex 是 flex-grow属性、flex-shrink属性、flex-basis属性的简写。默认值为：0 1 auto；

.item{
    
    flex: initial	// flex: 0 1 auto
	flex: 0;        // flex: 0 1 0%
	flex: 1;        // flex: 1 1 0%
	
	flex: none;     // flex: 0 0 auto
	flex: auto;     // flex: 1 1 auto
}

align-self 表示当前项目可以和其他项目拥有不一样的对齐方式。默认auto

flex-start(顶端对齐) | flex-end(底部对齐) | center(竖直方向上居中对齐) | baseline(item第一行文字的底部对齐) | stretch(当item未设置高度时，item将和容器等高对齐)