Flex 布局

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 Flex 是 Flexible Box 的缩写，意为"弹性布局",用来为盒状模型提供最大的灵活性。指定容器 display: flex 即可。 简单的分为容器属性和元素属性。 容器的属性：

• flex-direction：决定主轴的方向（即子 item 的排列方法）flex-direction: row | row-reverse | column | column-reverse;
• flex-wrap：决定换行规则 flex-wrap: nowrap | wrap | wrap-reverse;
• flex-flow： .box { flex-flow: || ; }
• justify-content：对其方式，水平主轴对齐方式
• align-items：对齐方式，竖直轴线方向
• align-content

项目的属性（元素的属性）：

• order 属性：定义项目的排列顺序，顺序越小，排列越靠前，默认为 0
• flex-grow 属性：定义项目的放大比例，即使存在空间，也不会放大
• flex-shrink 属性：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果 定义个 item 的 flow-shrink 为 0，则为不缩小
• flex-basis 属性：定义了在分配多余的空间，项目占据的空间。
• flex：是 flex-grow 和 flex-shrink、flex-basis 的简写，默认值为 0 1 auto。
• align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖
• align-items，默认属 性为 auto，表示继承父元素的 align-items 比如说，用 flex 实现圣杯布局

补充：

1. 当多个子盒子的总宽度 flex-basis<=父盒子时，使用的是 flex-grow 属性，按比例分配剩余空间；
2. 当多个子盒子的总宽度 flex-basis>父盒子时，使用的是 flex-shrink 属性，规则是

.box {
  display: flex;
  width: 200px;
  height: 50px;
}
.left {
  flex: 3 2 50px;
}
.right {
  flex: 2 1 200px;
}

计算规则：

• (1)计算超出父盒子的宽度：200+50-200 = 50;

• (2).left 需要减少：(502)/(502+200*1) * 50 = 50/3

  .right 需要减少：(2001)/(502+200*1) * 50 = 100/3

• (3)最终 left 宽度：50-50/3 = 100/3

  right 宽度：200-100/3 = 500/3

• (4)left 和 right 比例： 1:5