这期是我陆陆续续花了几个小时的时间为大家整理的Flex 弹性布局方法，主要讲了Flex布局的12个常见属性，以及文章最后的一个简单的小案例及其答案，希望对大家有帮助。

1Flex布局是什么?

Flex是Flexible Box的缩写，意为”弹性布局”，是一种用于按行或按列布局元素的一维布局方法，可以为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

flex布局默认有两条轴，水平的主轴和垂直的交叉轴 :

Flex布局

主轴 (main size) 是弹性容器的主要轴线，弹性项目(items)是沿着这个轴线布置的。请注意，它不一定是水平的；它取决于flex-direction属性（见下文）。在开始学习之前，我们先确定一下页面（容器）布局：

最外边的容器我们称为container：

container

container里面的每个小盒子，我们称为items：

items

1Flex布局有哪些属性?

假如现在有一个这样的初始结构:

HTML:

<div class="container">
  <div class="items1">1</div>
  <div class="items2">2</div>
  <div class="items3">3</div>
</div>

css：

.container {
  height: 400px;
  width: 600px;
  background-color: #e1e1e1;
}

页面是这样的 :

11. display: flex;

想要使用flex布局，我们必须先给外边的container容器加上一个display:flex;属性, 那么容器里面的元素才遵循flex布局:

.container{
   display:flex;
}

12. flex

再给container容器里面的items1 items2 items3一个统一的颜色、边框并添加flex 属性:

.container div {
  background-color: #ffb84d;
  border: 2px solid #666;
}
.items1 {
  flex: 1;
}
.items2 {
  flex: 1;
}
.items3 {
  flex: 1;
}

页面:

发现container里面的三个items水平等宽分布，这就是flex布局的基本应用。

如果我们把items1的flex的值改为2：

看到这你应该就知道flex属性的作用了, 对, 就是盒子占总量的份数 。如果删掉items2的flex:2属性, 给它一个固定的宽度:300px, 那么另外两个盒子仍然按照1:1的比例排列 :

flex布局可以嵌套, 比如我们现在给items3里再加两个div：items3-1 和 items3-2 , 再给items3添加display:flex;和flex-direction:column属性(下边会讲到这个属性), 最后给items3-1和 items3-2分别添加属性:flex:1和flex:2, 看效果 :

在items3里嵌套使用了Flex布局

13. flex-direction

回到原始的三个items 1:2:1排列的状态，我们给container加一个属性 : flex-direction: column;之后：

三个小items的排列方向发生了变化。因为container上的flex-direction属性决定了主轴的方向, 即项目排列的方向 :

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

14. flex-wrap

flex-wrap属性作用在container上，决定了当一排items排不下的时候，应该怎么排布。

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

flex-wrap属性的默认值是nowrap，即不换行(按照宽度比例排列在一行)，当然我们也可以通过改变它的值来进行换行：

现在给container的宽度为600px，三个items的宽度分别为250px，350px，450px，三个items的宽度加起来超过了container的宽度，items会换行，此时如果container的属性为：flex-wrap: wrap;：

若改为flex-wrap: wrap-reverse;：

15. justify-content

作用于container上，这个属性定义了项目在主轴上的对齐方式。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

常见排列：

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center：居中
• space-between：两端对齐，items之间的间隔都相等。
• space-around：每个items两侧的间隔相等。所以，items之间的间隔比items与边框的间隔大一倍。
• justify-content: space-evenly：每个items之间的间隔相等。

初始状态：container宽度600px，三个items宽高均为100px：

我们给container加上justify-content: center;属性：

justify-content: space-between;：

justify-content: space-evenly：

16. align-items

定义在container上，决定了items在交叉轴上的对齐方式。

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

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

例如：

align-items: center;：

align-items: flex-end;：

align-items: baseline;：

17. align-content

align-content定义在container上，决定了多行items在交叉轴上的对齐方式(类似于 justify-content在主轴上的效果)，如果items只有一行，那么这个属性将不起作用。也就是说这个属性必须搭配flex-wrap使用，不然items不会换行。

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

• flex-start/start：与交叉轴的起点对齐。
• flex-end/end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
• space-evenly：items均匀分布，每个items之间和items和边框之间的距离都相等。
• stretch（默认值）：轴线占满整个交叉轴。

align-content: end;:

align-content: space-between; :

align-content: space-around; :

align-content: space-evenly; :

align-content: center; :

……

18. order

该属性在items上，定义了项目的排列顺序，数值越小，排列越靠前，默认值为0。

.item {
  order: <integer>;
}

如果我们给items2一个属性:order:-1;，那么items之间的顺序会发生变化：

19. flex-grow

定义在items上，决定了items占据剩余空间的能力。注意这里说的是 “ 剩余空间 ” 。

.item {
  flex-grow: 4; /* default 0 */
}

比如现在是这样的：

我们给其中的items2添加属性：flex-grow:1;，给items3添加属性：flex-grow:2：

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

110. flex-shrink

定义在items上，决定了当container空间不足的时候，items缩小的比例，默认为1。

.item {
  flex-shrink: 3; /* default 1 */
}

如果现在container的宽度为600px，三个items的宽度均为300px，且不给container换行的属性(flex-wrap)，那么就会导致空间不足，此时每个items的默认flex-shrink值为1，三个items会等比例排列在container内：

此时，给items2添加flex-shrink:2的属性：

items2会按比例缩小。如果一个items的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不会缩小。

111. gap, row-agp, column-gap

gap属性定义了items之间的空间，并不作用于外边框上。这个属性只定义了items之间的最小间隙，如果间隙以某种方式变大(比如像justify-content: space-between;)，那么间隙将只在该空间最终变小的情况下生效。

.container {
  display: flex;
  ...
  gap: 10px;
  gap: 10px 20px; /* row-gap column gap */
  row-gap: 10px;
  column-gap: 20px;
}

row-gap: 20px; :

row-gap和column-gap分别定义了items在主轴和交叉轴方向上的最小间隙。

112. align-self

align-self属性定义在items上，它允许单个items有与其他items有不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

参考资料:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

1案例

以上基本上为flex所有常用的属性，下面我们来做一个小案例，实现一个圣杯布局 :

css和html代码 :

<style>
  .container {
    height: 400px;
    width: 600px;
    border: 2px solid #000;
    text-align: center;
    color: #fff;
  }
  .header {
    height: 40px;
    color: #fff;
    background-color: #666666;
  }
  .part {
    height: 320px;
    color: #000;
    background-color: skyblue;
    display: flex;
  }
  .left {
    flex: 1;
    background-color: #77bbdd;
  }
  .center {
    flex: 2;
    background-color: #d6d6d6;
  }
  .right {
    flex: 1;
    background-color: #ff6633;
  }
  .footer {
    height: 40px;
    background-color: #666666;
  }
</style>
</head>
<body>
<div class="container">
  <div class="header">欢</div>
  <div class="part">
    <div class="left">迎</div>
    <div class="center">关</div>
    <div class="right">注</div>
  </div>
  <div class="footer">学编程的GISer</div>
</div>
</body>

1下期预告

Grid布局是和Flex布局一样强大甚至更强大的布局方法，实现以上的圣杯布局, 我们用Gird布局只需要这样做 :

是不是比Flex布局还简单哈哈，下一期我来讲讲Grid布局。