flex布局也叫弹性布局
属性：display：flex
添加了df的盒子叫弹性容器。
弹性容器：
默认宽度就是父元素的宽度，高度由内容撑开。
弹性盒子：
1.是弹性容器最近一级子元素。
2.默认宽度由内容撑开，高度由和父元素保持一致。
3.弹性盒子没有块级元素，行内元素，行内块元素之分。都叫弹性盒子都可以设置宽高。
4.弹性盒子默认不会换行，会沿着主轴方向一行显示。
5.要注意弹性盒子的概念。
主轴对齐方式：添加给弹性容器
写法：justify-content:
属性：
jc flex-start：默认值，起点开始依次排列。
flex-end: 终点开始依次排列。
jcc flex-center：沿主轴居中排列。
space-around：弹性盒子沿主轴均匀排列，空白部分均分在弹性盒子两侧。
space-between；弹性盒子沿主轴均匀排列，空白部分均分在相邻盒子之间。
space-evenly：弹性盒子沿主轴均匀排列，弹性盒子和容器之间间距相等。
测轴对齐方式：
属性：align-items
flex-start ：默认值，起点开始依次排列
flex-end：终点开始依次排列
center ：沿侧轴垂直居中排列
stretch：默认值，弹性盒子沿主轴线被拉伸至铺满容器
控制某个弹性盒子；
align-self: 是给需要单独控制侧轴方向对齐方式设置的。
伸缩比：flex 给弹性盒子添加
1.所有的弹性盒子都添加相同的flex值，均分弹性容器的宽度；如果flex值不同，根据比例进行分配
2.其他的盒子宽度固定，只有一个盒子设置了flex:1 --- 占据父元素剩余的宽度
使用flex-direction修改主轴方向
这个值的作业：主轴方向变为垂直，侧轴方向变为水平
注意点：现在主轴和侧轴只是方向调换了主轴依然还是用jc改变对齐方式，侧轴还是用ai改变对其方式。
属性
row 默认为行，水平
column 列，垂直
row-reverse行，从右到左
column-reverse：列，从下往上
弹性盒子换行flex-wrap
弹性盒子换行显示flex-wrap：wrap；
调整行对齐方式：align-content：要出现必须先出现换行
取值与justify-content 侧轴属性基本相同
控制单行的侧轴排列方式
align-items flex-start flex-end center sh
