Flex布局必记知识点（上下左右居中和子元素部分）

前言

display: flex;弹性布局给父级添加这个属性

          排序 order
          父盒子大于子盒子和的情况  flex-grow
          父盒子小于子盒子的情况    flex-shrink
          flex宽度的替代方法       flex-basis
          flex  flex-grow  flex-shrink flex-basis
          子对齐  align-self

上下居中左右居中三板斧（对子元素起作用）：
          display: flex;
          justify-content: space-around;
          align-items: center;

1 flex布局的特点

总盒子的宽度大于子级盒子所有加起来和的宽度的话 会按照盒子所占比例进行等比缩放
总盒子的高度大于子级盒子所有加起来和的高度的话 会按照盒子所占比例进行等比缩放

2 flex子元素的属性

2.1 order（值为数字）

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
order:0;即后面接的是数字。

2.2 flex-grow（值为数字）

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
  针对子盒子总宽度小于父盒子宽度 即会有剩余空间的情况。谁的值大 谁占得多 如果一个最大 别的都一样小 那么大的会占据所有剩余空间

2.3 flex-shrink（值为数字）

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
  空间不足的情况下才会执行 前提条件flex-wrap: nowrap;(这个时候是默认属性也是百分比缩小) 若是只有一个0 其余为1 0不会缩小

2.4 flex-basis（值为px或auto）

flex-basis: 200px;有时候用来替换width 优先级更高

2.5 align-self（值为:auto | flex-start | flex-end | center | baseline | stretch;）

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

2.6 flex（值为数字 数字 auto/px）

flex属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
  flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。