弹性布局display:flex

1.flex-direction：设置伸缩项目的排列方式，即主轴的方向

row 设置从左到右排列

row-reverse 设置从右到左排列

column 设置从上到下排列

column-reverse 设置从下到上排列

2.justify-content：调整主轴方向上的对齐方式，对于弹性盒子内元素

flex-start 伸缩项目以起始点靠齐

flex-end 伸缩项目以结束点靠齐

center 伸缩项目以中心点靠齐

space-between 伸缩项目平局分布

space-around 同上，但两端保留一半的空间

ul{
padding: 0;
width:800px;
height:800px;
list-style: none;
border: 1px solid red;
display: flex;
flex-direction:row;
justify-content:space-around;
}
li{
width:200px;
height: 200px;

text-align: center;
line-height: 200px;
}

3.align-items：调整侧轴方向对齐方式

flex-start 伸缩项目以顶部为基准，清理下部额外空间

flex-end 伸缩项目以底部为基准，清理上部额外空间

center 伸缩项目以中部为基准，平均清理上下部额外空间

baseline 伸缩项目以基线为对齐，清理额外的空间

stretch 伸缩项目填充整个容器，默认

ul{
padding: 0;
width:800px;
height:800px;
list-style: none;
border: 1px solid red;
display: flex;
flex-direction:row;
align-items:flex-end;
justify-content:space-between;
}

ul{
padding: 0;
width:800px;
height:800px;
list-style: none;
border: 1px solid red;
display: flex;
flex-direction:row;
align-items:stretch;
justify-content:space-between;
}
li{
width:200px;//指定高度，才能拉伸

text-align: center;
line-height: 200px;
}

4.flex-wrap控制是否换行

nowrap 默认值，都在一行或一列显示 ，会自动改变盒子内元素宽度

wrap 伸缩项目无法容纳时，自动换行

wrap-reverse 伸缩项目无法容纳时，自动换行，方向和 wrap 相反

5.align-content：堆栈排列，应用flex-wrap：wrap后换行进行控制，调整行之间的位置。用于多行，
4000
要设置父容器的高度

flex-start

flex-end

center

space-between

space-around

stretch默认

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

7.flex：控制伸缩容器内父盒子剩余空间的分配比例

li{

text-align: center;
line-height: 100px;
margin:10px;
}
li:nth-child(1){
flex:1;
}
li:nth-child(2){
flex:3;
}
li:nth-child(3){
flex:1;
}

li:nth-child(1){
flex:1;
}
li:nth-child(2){
flex:3;
}
li:nth-child(3){
flex:1;
}
li:nth-child(4){
width:400px;
}

8.align-self，子元素覆盖父元素设置的align-items，属性值也是flex-start、flex-end、center、baseline、stretch

ul{
align-items:flex-start;
}
li:nth-child(2){
align-self:center;
}

9.order，设置伸缩项目的顺序

li:nth-child(1){
order:3;
}
li:nth-child(2){
order:1;
}
li:nth-child(3){
order:2;
}