自从除了一些传统行业还需要为IE这种古早产物做兼容。
我们很多时候已经不太需要考虑某些css属性的兼容了。
那么我今天来聊一聊——flex布局。
如果你还在为元素的对齐、分布和尺寸调整而烦恼，那么flex布局很可能就是你要找的答案。

什么是flex布局？

flex布局，也叫弹性盒子布局，是CSS3中一种新的布局模式。

在flex布局中，有两个核心概念：

• • flex容器：设置了 display: flex 或 display: inline-flex 的元素。
• • flex项目：flex容器内的每一个直接子元素。

注意：flex布局只影响其直接子元素，孙子元素不受影响。

如何开启flex布局？

开启flex布局非常简单，只需要在父元素（容器）的CSS中设置一个属性：

.container {
  display: flex; /* 或者 display: inline-flex; */
}

一旦设置了 display: flex，这个元素就变成了一个flex容器，它的所有直接子元素自动成为flex项目，并按照flex的规则进行排列。

容器的属性详解

flex容器的属性控制着所有项目的整体排列方式。我们来逐一看看。

1. flex-direction：决定主轴方向

这个属性决定了flex项目在容器内的排列方向，也就是主轴的方向。

它有四个值：

• • row（默认值）：主轴为水平方向，起点在左端。
• • row-reverse：主轴为水平方向，起点在右端。
• • column：主轴为垂直方向，起点在上沿。
• • column-reverse：主轴为垂直方向，起点在下沿。

.container {
  display: flex;
  flex-direction: row; /* 水平从左到右 */
}

2. flex-wrap：决定是否换行

默认情况下，flex项目会尝试挤在一行里。flex-wrap属性定义了当一行放不下所有项目时，是否换行。

它有三个值：

• • nowrap（默认值）：不换行，项目可能会被压缩。
• • wrap：换行，第一行在上方。
• • wrap-reverse：换行，第一行在下方。

.container {
  display: flex;
  flex-wrap: wrap; /* 空间不足时换行 */
}

3. justify-content：定义主轴上的对齐方式

这个属性定义了项目在主轴上的对齐方式，也就是如何分配主轴上的剩余空间。

它有六个常用值：

• • flex-start（默认值）：向主轴起点对齐。
• • flex-end：向主轴终点对齐。
• 
• • center：居中对齐。
• • space-between：两端对齐，项目之间的间隔相等。
• 
• • space-around：每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍。
• • space-evenly：每个项目两侧的间隔完全相等。
• 

.container {
  display: flex;
  justify-content: space-between; /* 项目均匀分布，两端无空隙 */
}

4. align-items：定义交叉轴上的对齐方式

这个属性定义了项目在交叉轴（与主轴垂直的轴）上的对齐方式。

它有五个常用值：

• • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
• • flex-start：向交叉轴的起点对齐。
• • flex-end：向交叉轴的终点对齐。
• • center：在交叉轴居中对齐。
• • baseline：项目的第一行文字的基线对齐。

.container {
  display: flex;
  align-items: center; /* 所有项目在垂直方向上居中对齐 */
}

5. align-content：定义多根轴线的对齐方式

这个属性定义了当容器内有多行（多根轴线）时，这些轴线在交叉轴上的对齐方式。只有一根轴线时，该属性不起作用。

它的值和 justify-content 类似：

• • stretch（默认值）：轴线占满整个交叉轴。
• • flex-start：向交叉轴的起点对齐。
• • flex-end：向交叉轴的终点对齐。
• • center：在交叉轴居中对齐。
• • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• • space-around：每根轴线两侧的间隔相等，轴线之间的间隔比轴线与边框的间隔大一倍。
• • space-evenly：每根轴线两侧的间隔完全相等。

项目的属性详解

说完了容器的属性，我们再来看看flex项目自身的属性。这些属性可以单独控制每个项目的表现。

1. order：定义项目的排列顺序

默认情况下，项目按照HTML代码的顺序排列。order属性可以改变这个顺序，数值越小，排列越靠前。默认值为0。

.item {
  order: 1; /* 这个项目会排在 order 小于1的项目后面 */
}

2. flex-grow：定义项目的放大比例

这个属性定义了当容器有剩余空间时，项目放大的比例。默认值为0，即不放大。

如果所有项目的flex-grow都为1，它们将等分剩余空间。如果一个项目的flex-grow为2，其他项目为1，则前者占据的剩余空间将比其他项目多一倍。

.item {
  flex-grow: 1; /* 可以放大 */
}

3. flex-shrink：定义项目的缩小比例

这个属性定义了当容器空间不足时，项目缩小的比例。默认值为1，即空间不足时，项目会缩小。

如果所有项目的flex-shrink都为1，当空间不足时，它们将等比例缩小。如果一个项目的flex-shrink为0，其他项目为1，则空间不足时，前者不缩小。

.item {
  flex-shrink: 0; /* 空间不足时，这个项目不缩小 */
}

4. flex-basis：定义项目在分配多余空间之前的初始大小

这个属性定义了项目在分配多余空间之前占据的主轴空间。浏览器根据这个属性计算主轴是否有多余空间。它的默认值是auto，即项目的本来大小。

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

.item {
  flex-basis: 100px; /* 初始主轴尺寸为100像素 */
}

5. flex：flex-grow, flex-shrink 和 flex-basis的简写

flex属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选。

它有几个常用的快捷值：

• • flex: initial：等同于 flex: 0 1 auto。（不放大，可缩小，初始大小为auto）
• • flex: auto：等同于 flex: 1 1 auto。（可放大，可缩小，初始大小为auto）
• • flex: none：等同于 flex: 0 0 auto。（不放大，不缩小，初始大小为auto）
• • flex: 1：等同于 flex: 1 1 0%。（常用，项目会等分空间）

.item {
  flex: 1; /* 这是一个非常常用的写法，让项目等分空间 */
}

6. align-self：允许单个项目有与其他项目不一样的对齐方式

这个属性允许单个项目覆盖容器align-items属性的设置。默认值为auto，表示继承父容器的align-items属性。如果没有父容器，则等同于stretch。

它的可选值和align-items完全一样。

.item-special {
  align-self: flex-end; /* 这个项目自己靠在交叉轴末端 */
}

浏览器兼容性

flex布局在现代浏览器中得到了很好的支持。对于需要兼容旧版浏览器（如IE10以下）的情况，可能需要使用传统的布局方式或添加浏览器前缀。

下表是主要属性的兼容性概览：

*注：IE11对flex布局的支持存在部分已知问题，使用时需注意。

写在最后

flex布局的学习曲线相对平缓，一旦掌握，你会发现很多以前很麻烦的布局问题都变得轻而易举。

​

阅读原文：https://mp.weixin.qq.com/s/T46QzZOahoD0IFofDKkFeA