1.Flex之前

• 布局的传统解决方案，基于盒模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如垂直居中就不容易实现。
• 传统布局主要使用：
  normal flow（正常流，也称文档流）
  float+clear
  position: absolute+relative
  display inline-block
  负margin

2.Flex来了

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

  
  
• Flex 布局将成为未来布局的首选方案。
• Flex布局的特点：
  1.块级布局侧重垂直方向，行内布局侧重水平方向，flex布局是与方向无关的。
  2.flex布局可以实现空间的自动分配，自动对齐(flexble：弹性、灵活)。
  3.flex适用于简单的线性布局，更复杂的布局要交给grid布局(还没发布)。

3.基本概念

4.与父元素有关的属性

1.flex-direction：定义弹性布局中元素的排列方式。

值	意义
row	使子元素从左向右排列
row-reverse	使子元素从右向左排列
colume	使子元素从上向下排列
colume-reverse	使子元素从下往上排列

2.flex-wrap：定义弹性布局中的换行和换行后的排列。

值	意义
nowrap	默认值，设置该容器里的弹性元素不换行
warp	设置该容器里的弹性元素在必要时换行
wrap-reverse	设置该容器里的弹性元素在必要时换行，并且反向排列

3.flex-flow：flex-direction与flex-wrap的简写，用法为：flex-flow： row nowrap；意思是设置flex-direction为row，设置flex-wrap为nowrap。
4.justify-content：设置主轴方向的对齐方式。

值	意义
space-between	将行内的空格均匀分布在各个子元素中间
space-around	将行内的空格均匀放置在各个元素周围
flex-start	使元素聚集在起点
flex-end	使元素聚集在结尾
center	使元素居中

5.align-items：设置侧轴方向的对齐方式。

值	意义
stretch	子元素被拉伸以适应容器
center	子元素位于父元素的中心
flex-start	子元素聚集在起点
flex-end	子元素聚集在结尾
baseline	子元素位于容器的基线上

6.align-content：控制弹性布局中的行间距样式

值	意义
space-between	将空格分布在各个空间中
space-around	将空格分布在行的周围
flex-start	所有元素往侧轴的起点靠
flex-end	所有元素往侧轴的终点靠
center	所有项目聚集在侧轴的中心

5.根子元素有关的属性

1.flex-grow：用于定义子元素填充其他空白的比例。
例如：

div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}
div:nth-of-type(3) {flex-grow: 1;}

意义为第一个子元素包含空间的五分之一，第二个子元素包含空间的五分之三，第三个子元素包含空间的五分之一。
2.flex-shrink：用于定义父元素宽度不够时的收缩比例。
3.flex-basis：定义元素的原始大小。
4.flex：上面三个元素的缩写。
5.order：可以定义元素排列的顺序。
6.align-self：定义其中某个元素的对齐方式。