对Flex布局的理解

一、开启Flex布局

.box{
	display: flex;
}

二、Flex布局容器(container)的属性

flex-direction：项目沿主轴的排列方向

.box{
	flex-direction:row(默认) | row-reverse | column ｜ column-reverse;
}

flex-wrap：沿轴线项目是否换行

.box{
	flex-wrap:nowrap(默认) | wrap | wrap-reserve;
}

flex-flow：flex- direction和flex-wrap的简写

.box{
	flex-flow:row nowrap(默认);
}

justify-content：项目在主轴上的对齐方式

.box{
	justify-content:flex-start(默认) | center | flex-end ｜ space-between | space-around;
}

align-items：项目在交叉轴上的对齐方式

.box{
	align-items:stretch(默认) | flex-start | center ｜ flex-end ｜ baseline;
}

align-content：项目在多根轴线上的对齐方式

.box{
	align-content:stretch(默认) | flex-start | center ｜ flex-end | space-between | space-around;
}

三、Flex布局项目(item)的属性

order：项目的排列顺序，默认值为0
flex-grow：项目的放大比例，默认值为0
flex-shrink：项目的缩小比例，默认值为1
flex-basis：项目占据主轴的空间，默认为auto
flex：flex-grow、flex-shrink、flex-basis的简写，默认0 1 auto
align-self：单个项目于其他项目不一样的对齐方式，默认值auto，继承父元素align-items