前端ABC首先使用flex布局需要声明，任何一个容器都可以指定为Flex布局。
.box{
display: flex;}
容器有六个属性可以设置
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
1.flex-direction属性决定主轴的方向（即项目的排列方向）。
.box {
flex-direction: row | row-reverse | column | column-reverse;}
2。 flex-wrap
.box{
flex-wrap: nowrap | wrap | wrap-reverse;}
3.flex-flow
.box {
flex-flow:<flex-direction> || <flex-wrap>;}
4. justify-content
justify-content属性定义了项目在主轴上的对齐方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;}
5.align-items属性定义项目在交叉轴上如何对齐。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;}
6.align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;}
欢迎分享本文，转载请保留出处：前端ABC » flex弹性布局属性