手把手 Flexbox——从零开始的奶奶级 Web 开发教程3

上一篇讲了盒子模型，今天我们要涉及的主题是 Flexbox。
先来点顾名思义，Flex，折叠；box，盒子。可以折叠的盒子，也称作弹性盒子，就是可以根据可用的空间进行缩放的网页元素。
既然是盒子，那么肯定有容器，又有容器内部的元素。
那么具体怎么缩放呢？我们通过几个例子来看看 Flex 的基本用法……
伸展、收缩和基准

Flex 的缩放，影响的是容器内部的元素。
要用 Flex，首先得把容器设置为 Flex。
可以通过设置容器 display: flex; 轻易做到这一点。
好了，现在容器变成弹性盒子了，里面的元素会如何布局呢？
让我们看看下面的示例：

1.   This is an item
2.   This is an item
3.   This is an item

复制代码

我们还没有增加任何 CSS，这时候，网页元素按照上一篇里面说的正常布局流显示，也就是从上到下。

那么我们先把它变成弹性盒子试试：

1. .container{
2.   display: flex;
3. }
4. .content{
5.   border: 1px solid red;
6. }

复制代码

是的，现在它们变成了横向堆叠。（方向的问题之后再解释）

现在，我们尝试把可视范围压缩下，当横向没有空间时，会发生什么？

可以看到，当横向空间不足，整个元素自动横向收缩。由于字必须显示，因此换行到了第二行。只有一行只有一个单词的时候，才会溢出（因为不能截断单词）
这种行为由 flex 属性控制，它是以下三个属性的缩写：

• flex-grow（控制放大）
  
• flex-shrink（控制收缩）
  
• flex-basis（控制元素的基础大小）
  

默认情况下，设置为 flex: 0 1 auto
也就是说，上面的代码，与下面都是等效的。

1. .content{
2.   border: 1px solid red;
3.   flex: 0 1 auto;
4. }
5. /* 或者，和下面也是等效的 */
6. .content{
7.   border: 1px solid red;
8.   flex-grow: 0;
9.   flex-shrink: 1;
10.   flex-basis: auto;
11. }

复制代码

我知道你很急，但你先别急。接下来我们就来看看这三个属性。
flex-grow/shrink

这个元素控制了元素是否伸展，以及不同元素之间的伸展比例。
试一试，把上面值从 0 改成 1。

发现了吗？现在，元素自动占满了整个空间。也就是说，设定为 0，就是不伸展，非 0，就是允许伸展。
为什么说非 0 呢？
因为这个数字表示比例。
也就是说，如果你给不同元素设定不同数字，那么它们就会按照不同的比例进行缩放。
比如……

1. .content1{
2.   flex-grow: 1;
3. }
4. .content2{
5.   flex-grow: 2;
6. }
7. .content3{
8.   flex-grow: 3;
9. }

复制代码

自己试一试，你会发现它们按照 1：2：3 进行放大。
也就是说，设定为 100：100 和 1：1 的效果是完全一致的。
收缩也同理啦。0 不允许收缩。其它数字就是收缩比例。
flex-basis

你有没有发现，我们上面都在讨论缩放。
当我们谈到缩放时，是对原先就有的东西，进行缩小和放大。
而 flex-basis，就是定义这个“缩放基准”。默认情况下，会根据你的文字长度自动决定，也就是 auto。
现在我们先把放大关掉，然后尝试改变窗口大小：

1. .content{
2.   border: 1px solid red;
3.   flex: 0 1 200px;
4. }

复制代码

看到了吗？当达到 200px 的时候，不再放大，因为不允许放大。200px 为一个基准。
实际上，使用 width 也可以达到同样的效果。但是，flex-basis 的优先级更高，并且方向会随着 flex 方向改变。
下面，我们就来聊聊 flex 的方向。
flex 的轴

看完了放缩，是时候看看 flex 布局元素的方向了！
flex 有两根轴，分别称作主轴和交叉轴。
在默认情况下，它们如下排列：

元素沿着主轴堆叠。
但是，你也可以手动更改。
用到的属性是 flex-direction。写在容器里面。上面的默认值为 row。现在我们改成 column 试试。

1. .container{
2.   display: flex;
3.   flex-direction: column;
4. }
5. .content{
6.   border: 1px solid red;
7. }

复制代码

是的，它变成了垂直堆叠。
现在，变成这样：

还记得上面我们提到的 flex-basis 吗？
它表示元素在主轴上面的基准，也就是说，如果再次加上上面的基准……

1. .content{
2.   border: 1px solid red;
3.   flex: 0 1 200px;
4. }

复制代码

没错，基准的方向是主轴！
注意了，在设置为 column 时，即使 flex-grow 为 1，也不会自动放大占满屏幕哦。这是因为，你并没有指定容器的高度，因此不会自动拉长。
你也许注意到了，上面的例子里面，水平方向是占满的。没错，水平方向是会自动占满屏幕的。这和 html 有关，元素默认就有宽度。
调整元素布局

要想调整元素的布局，有 3 个重要属性，一定要记住。
justify-content

这个属性，指定了容器该如何在主轴上面排列元素。
可选的常用值有：

• space-between，容器内子元素间均分空隙，但是元素和两边没有空隙
  
• space-around，上面的+元素两边也有空隙
  
• center，元素居中紧密排列
  
• flex-start，元素排列在主轴开头
  
• flex-end，元素排列在主轴末尾
  速通一下：
  

1. .container1,.container2,.container3{
2.   display: flex;
3.   margin: 20px 0px;
4. }
5. .content{
6.   border: 1px solid red;
7.   flex: 0 1 100px;
8. }
9. .container1{
10.   justify-content: flex-end;
11. }
12. .container2{
13.   justify-content: space-between;
14. }
15. .container3{
16.   justify-content: space-around;
17. }

复制代码

其它的几个，请自行探索~
另外注意，可以设置 gap 属性，控制元素间的距离哦。请自行尝试~
align-item

控制子元素在交叉轴上面的排列。
可选值：

• flex-start/end 同上
  
• center 同上
  
• stretch 拉伸占满空间
  

再来个速通例子：

1. .container1,.container2,.container3{
2.   display: flex;
3.   margin: 20px 0px;
4.   justify-content: center;
5. }
6. .content{
7.   border: 1px solid red;
8.   flex: 0 1 100px;
9. }
10. .container1{
11.   align-items: flex-start;
12. }
13. .container2{
14.   align-items: center;
15. }
16. .container3{
17.   align-items: flex-end;
18. }

复制代码

html 部分有所改动：

1.   This is an item
2.   This is an item
3.   This is an item

复制代码

给加上了高度限定。
效果：

很好理解，这里不再赘述。
最重要的是，这个 stretch。
去掉每个元素的死高度限制，改下代码：

1. .container1{
2.   display: flex;
3.   margin: 20px 0px;
4.   justify-content: center;
5.   align-items: stretch;
6.   height: 100px;
7. }

复制代码

看到了吗，它拉伸了。
另外，你也可以对于单个元素设置 align-self，改变它在交叉轴上的排列方式。这里不再演示，自己试试就好啦。
自动换行

如果主轴上显示不下，你可以设置自动换行。自动换行会根据 flex-basis 进行计算。
设定 flex-warp 即可换行。

1. .container1{
2.   display: flex;
3.   margin: 20px 0px;
4.   justify-content: center;
5.   flex-wrap: wrap;
6. }
7. .content{
8.   border: 1px solid red;
9.   flex: 1 1 200px;
10. }

复制代码

当元素达到 200px 时，换行标准满足，此时不再收缩，而是直接换行。直到换行仍然无法显示，再进行收缩。也就是说，flex-basis 像是一种建议，浏览器会尽力满足这种建议：

注意了，换行后，我们就存在了多根主轴。
既然 align-items 在交叉轴上对齐元素，那么主轴的对齐怎么办？
此时就有了新的属性。
align-content

排列组合
改下代码，指定一个容器高度：

1. .container1{
2.   display: flex;
3.   margin: 20px 0px;
4.   justify-content: center;
5.   align-items: center;
6.   flex-wrap: wrap;
7.   align-content: center;/* 把多个主轴在交叉轴上居中在容器内 */
8.   height: 200px;
9. }

复制代码

换行后，效果是这样的（注意这个截图不完整，实际上是布局在 200px 正中间的）：

但是，如果我们改成 space-between。

是的，和前面两个的逻辑完全一样，只不过是改变了对象，涉及主轴的排列罢了。

结语

flexbox 为我们的网页布局提供了非常多的可能性，允许我们创建可缩放的网页。搞清楚这些属性之后，flex 也就不难了。
基础 css 讲完了，下一篇我们将涉及 javascript，同样是简明易懂的奶奶级教程，敬请期待哦。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！