弹性盒

一，弹性父元素

将元素设置为弹性盒，使子元素自左向右排列 display:flex;

1 . 弹性子元素的排列方式 flex-direction

flex-direction:row默认，自左往右
flex-direction:column;自上往下
flex-direction:column-reverse自上而下翻转
flex-direction:row-reverse自左向右翻转

如果子元素自左往右排列，此时主轴为x轴
如果自上往下，主轴为y轴

2 . 弹性子元素在父元素中主轴的对齐方式 justify-content

 justify-content: center;
 justify-content: flex-start;默认值
 justify-content: flex-end;
 justify-content: space-between;
 justify-content: space-around;两边，有距离

3. 弹性子元素在父元素中侧轴的对齐方式 align-items

如果子元素自左向右排列，侧轴为y轴，反之为x轴
如果弹性子元素未设置高度，添加侧轴对齐方式的时候，子元素的高度就是内容的高度

align-items:flex-start;
align-items:center;
align-items:end;

4. 弹性子元素的总宽度超过父元素的宽度时，弹性子元素是否允许换行显示 flex-wrap

flex-wrap:no-wrap;默认值，不允许
flex-wrap:wrap; 允许换行
flex-wrap:wrap-reserve; 行的翻转

5.弹性子元素的排列方式和换行缩写flex-flow

flex-flow:row wrap-reserve; 弹性子元素的排列方式和换行缩写
flex-flow:row wrap;

6. 弹性子元素的行的排列align-content

align-content必须与flex-wrap连用

align-content:flex-start;
align-content:flex-end;
align-content:center;
align-content:space-around
align-content:space-between

二，弹性子元素

ul{
	display:flex;
	justify-content:center;
	flex-direction:column;
}
li{
	flex:1;
}
li:nth-child(1){
	flex:2;
}

display将元素设置为弹性盒子，如果弹性子元素未设置宽高，则弹性子元素的高度是父元素的高，宽度是内容的宽

flex:1; 弹性子元素所占的份数 （弹性子元素平分的是父元素的宽度）
如果flex后边一个值，代表子元素在父元素所占份数，多个值指flex-grow,flex-shrink,flex-basis，flex是三个的缩写，默认值为0 1 auto
flex-basis:100px; 设置弹性子元素的宽度
flex-grow:1; 设置弹性子元素占剩余空间的份数（平均分配剩余的空间）
flex-shrink:0;是否允许我们的弹性子元素进行收缩，1允许

更改子元素的排列顺序order值越小越靠前，可以为负值

设置弹性子元素的对齐方式

align-self:center;
align-self:initial；默认值
align-self:flex-start;
align-self:flex-end;
align-self:baseline;
align-self:stretch;元素被拉伸以适应容器