CSS—flex 弹性布局（父/子元素的属性）

一、flex弹性布局

display:fixed

 弹性布局，可以让盒子并排显示，并且可以使行内元素转换为行内块级元素

通常在flex布局里，使用时要注意，自己的主轴和侧轴的位置，因为一般情况下，主轴默认为X轴方向，侧轴为Y轴方向

二、 flex容器（flex container）

 所有子元素自动成为flex项目(flex item) 简称项目

子元素可横向排列，也可纵向排列。原理:通过给父元素添加flex属性，来控制盒子的位置和排列方式

三、父元素的属性

1、flex-direction：设置主轴方向，默认为X轴方向，也可设置Y轴为主轴

row	(默认的值)   X轴
column	垂直方向（Y轴）
row-reverse	倒序排列
column-reverse	主轴沿垂直方向从下到上

2、justify-content：设置主轴上子元素的排列方式，使用前先确定好主轴方向

flex-start	项目位于容器的顶部
flex-end	项目位于容器的底部
center	子元素水平居中
space-around	将剩余空间平均分配给子项目，剩余空间=父盒子的总宽度-子项目的总宽度
space-between *	子项目两边贴合父元素，并平均分配。两端对齐，项目之间的间隔是相等的

3、flex-wrap:设置子元素是否换行，布局中默认不换行

nowrap	不换行（默认），所有的子项目会在一行显示出来，并平均分配父容器的宽度
wrap	换行

4、align-items：设置侧轴上的子元素排列方式（单行——也就是不换行）

注意：只有在单行的情况下，才能使用align-items

flex-start	项目位于容器的顶部
flex-end	项目位于容器的底部
center	和justify-content都一起设置center时，子项目就垂直水平居中
stretch	使用时  子元素不能设置高度，使用较少。拉伸

5、align-content：设置侧轴上子元素排列方式（多行）

多行情况下，子项目对于侧轴的排列方式

space-between	多行项目均匀分布在容器中，其中第一行分布在容器的顶部，最后一行分布在容器的底部
space-around	多行项目均匀分布在容器中，其中第一行分布在容器的顶部，最后一行分布在容器的底部

6、flex-flow：复合型写法，同时设置 direction 和 wrap 的值

                flex-flow: column wrap;

四、子元素的属性

flex	子项目占的分数，定义子项目分配剩余空间，用flex来表示占多少份； flex: 1;
align-self	控制子项目自己在侧轴的排列方式
order	定义子项的排列顺序（前后顺序），默认为0，数值越小 排列越靠前； order: -2;