flex 弹性盒子布局

给容器设置
任何容器都设置 inline-flex 场景几乎没有 （行级）
子元素 浮动
display : flex; 使其变成弹性和模型
flex-direction 定义弹性盒模型的主轴方向
row 默认 主轴X方向
row-reverse 定义主轴为X 从右向左排列
column 改变主轴方向为竖直 顺序从上到下
column-reverse 改变主轴方向为竖直 竖直方向从下到上怕列
justify-content 定义对齐
flex-start 默认值 从主轴的启示对齐
flex-end 从主轴的末尾对齐
flex-center 中间对齐
space-between 定义元素平均分配在主轴上 第一个在开始最后一个在末尾 其他均匀分布
space-around 定义内容元素平均分配在主轴上 两侧的间距是中间的一半

flex-warp
no-warp 默认值 不换行
warp 在开始的地方开始 一行放不下自动换行
warp-reserve 在结束的地方开始

align-items 定义元素交叉轴上的位置
stretch 不设置交叉轴方向的长度是自动铺满交叉轴
baseline 以文字的基线对齐

align-content 交叉抽多行控制方式
属性值和justify-content一样
flex-flow ；两个值 是flex-direction：；和 flex-warp：；的缩写 两个属性之间用空格
以上是伸缩容器设置的属性

  伸缩项设置的属性
  order：； 顺序
            谁的数值大谁在后边默认值是0；可以用负数让一个元素快速的提升到前面

flex-grow ：；伸缩项目的放大比例 默认值是0 存在剩余空间也不放大 值为一的时候自适应 平均分配剩余空间
如果想提高某一个元素的大小，可通过改变其权重来改变（权重即数值大小）
flex-shrink : ； 伸缩项的缩小比例 默认值是 1 伸缩项的大于容器的时候 所有伸缩项共同缩小相同的尺寸达到自适应效果 如果想打破平衡也可以通过改变权重 权重越大缩小比例越大
值为0的时候会撑破容器
flex-basis 项目占据主轴空间 默认值是auto （由内容撑开）

flex ：；三个属性的集合（flex-grow flex-shrink flex-basic）
默认值 flex：0 1 auto；

align-self：；允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

标注：可以给容器设置padding，也可以给元素设置margin调整一行中元素的个数