「这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」。

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。说白了flex（弹性盒子）就是一种方便排列，对齐和样式调整的一种css3布局。接下来系统的讲讲flex布局的特性以及flex中父容器和子容器身上的属性。

flex常见属性

开启flex布局后，我们会发现div块级盒子开始在同一行排布，由父元素display：flex开启flex布局，子元素可以看做是行内块元素。自左向右排布，这就是默认排布。在父盒子container中会有一个属性，来控制子元素的排布。首先看看那flex父容器中有哪些属性，然后我们再来一一讲解。

## flex-direction 属性
## justify-content 属性
## align-items 属性
## flex-wrap 属性
## flex-flow 属性
## align-content 属性//对于多行排布

首先来看看flex-direction

flex-direction：flex-direction: row | row-reverse | column | column-reverse

根据我们最初定义的粉色盒子，蓝色盒子，绿色盒子我们不难得出

row：自左向右排布
row-reverse：自右向左排布
column：自上而下排布
column-reverse：自下而上排布

justify-content

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

根据实际代码操作我们不难看出来

flex-start :从X轴自左向右开始排布
flex-end:从x轴所有元素靠右展示
center :所有元素在x轴居中对齐
space-around:所有元素平分剩余空间（多出来的空间平分到盒子中的距离上）
space-between:所有子元素中，先两边两个元素贴边，剩余的元素平分剩余空间
space-evenly:所有子元素距离一致

align-items

 flex-start:从Y轴顶部开始
 flex-end：从Y轴底部开始
 center：在垂直方向Y轴居中
 stretch：当没有设置子盒子的高度时，会填充至父盒子高度

flex-wrap ：子元素是否换行

nowrap:不难看出，如果不换行，子元素们会被挤在同一行
wrap：子元素们在x轴主方向上自左向右排布，且y轴方向上自上而下，（y轴上的剩余空间会平分同样的行数）
wrap-reverse：子元素们同样在x轴主方向上自左向右排布，但是y轴自下而上（同样）

接下来我们看看作用在子元素上都有哪些属性

order:根据数值定义排列顺序，数值小的排在前面，默认为0

flex-grow：
//当项目存在剩余部分时，使用其平分剩余部分.如果只对其中一个子元素设置，
//那么该子元素独享剩余部分，如果对多个元素设置，则按照给定的数值平分剩余部分

flex-shrink:
//当项目空间不足时，设置0表示不缩小该元素。默认为1（负值无效）
//当对多个元素设置同样有效
//如果设置为2,3时缩小为1/2设置的值

flex-basis:
//默认值auto，项目本身大小
//当还存在剩余空间时，自定义宽度，并且如果设置过长，例如600px

flex:
//集成了flex-grow：flex-shrink:flex-basis:
写法是flex:1 0 auto;flex-frow必填，flex-shrink:flex-basis:可选

感谢读者大大的阅读，作为一个前端小白，写作的内容多少会有点瑕疵，如果写的文章有不好值得纠正的地方，欢迎各位读者大大们的指正和探讨。

常见flex布局属性图解

flex常见属性