flex弹性布局

弹性布局（Flexible Box Layout，简称Flexbox）是一种用于网页布局的 CSS 模块。它提供了一种灵活的方式来对容器中的项目进行排列、对齐和分布空间。

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

使用弹性布局，我们可以将容器分成一个或多个弹性项目，每个项目可以具有不同的大小，且能够根据可用空间自动调整其位置和尺寸。弹性布局通过指定容器的属性和项目的属性来控制布局行为。

使用

• display: flex; 用于设定容器为 Flexbox 布局；

• flex-direction: row/column/row-reverse/column-reverse; 用于设定主轴方向；

• flex items默认都是沿着main axis（主轴）从main start 开始往main end 方向排布

  flex-direction决定了main axis的方向，有4个取值：

  row（默认）：从左往右
  row-reverse：从右往左
  column：从上往下
  column-reverse：从下往上

• justify-content: center/flex-start/flex-end/space-between/space-around; 用于设定主轴上的对齐方式；

• flex-start（默认值）：与 main start 对齐
  flex-end：与 main end 对齐
  center：居中对齐
  space-between：flex items之间的距离相等，与main start、main end两端对齐
  space-evenly：flex items之间的距离相等，与main start、main end之间距离等于flex items之间的距离
  space-around：flex items之间的距离相等，与main start、main end之间距离等于flex items之间的距离的一半
   

• align-items: center/flex-start/flex-end/baseline/stretch; 用于设定交叉轴上的对齐方式；

• normal：在弹性布局中，效果和stretch一样
  stretch：当flex items在cross axis方向的size为auto时，会自动拉伸至填充flex container
  flex-start：与cross start对齐
  flex-end：与cross end对齐
  center：居中对齐
  baseline：与基准线对齐
   

• flex-wrap: nowrap/wrap/wrap-reverse; 用于设定元素在主轴上是否换行；

• nowrap（默认）：单行
• wrap：多行
• wrap-reverse：多行（对比wrap，cross start与cross end相反）

• flex-grow/flex-shrink/flex-basis: 用于设定元素在主轴上的伸缩属性。

flex-grow决定了flex items如何扩展

• 可以设置任意非负数字（正小数、正整数、0），默认值为0
• 当flex container在main axis方向上有剩余size时，flex-grow属性才会有效

 flex-shrink决定了flex items如何收缩

• 可以设置任意非负数字（正小数、正整数、0），默认值为1
• 当flex items在main axis方向上超过了flex container的size时，flex-shrink属性才会有效

.flex的注意事项

1. 子元素是依赖容器的元素，想要控制子元素排列，依靠的是父级容器

2. 设置父元素为弹性盒，子元素的float将失效

3. 切记不要把flex与浮动布局或定位布局一起使用

4. 使用display:flex;其子元素将块状化