如何从零开始学习Flexbox，实现奶奶级Web开发教程第3部分？

上一篇讲了盒子模型，今天我们要涉及的主题是 Flexbox。 先来点顾名思义，Flex，折叠；box，盒子。可以折叠的盒子，也称作弹性盒子，就是可以根据可用的空间进行缩放的网页元素。 既然是盒子，那么肯定有容器，又有容器内部的元素。 那么具体怎么缩放呢？我们通过几个例子来看看 Flex 的基本用法…… 伸展、收缩和基准 Flex 的缩放，影响的是容器内部的元素。 要用 Flex，首先得把容器设置为 Flex。 可以通过设置容器 display: flex; 轻易做到这一点。 好了，现在容器变成弹性盒子了，里面的元素会如何布局呢？ 让我们看看下面的示例： <div class="container"> <div class="content">This is an item</div> <div class="content">This is an item</div> <div class="content">This is an item</div> </div> 我们还没有增加任何 CSS，这时候，网页元素按照上一篇里面说的正常布局流显示，也就是从上到下。 那么我们先把它变成弹性盒子试试： .container{ display: flex; } .content{ border: 1px solid red; } 是的，现在它们变成了横向堆叠。（方向的问题之后再解释） 现在，我们尝试把可视范围压缩下，当横向没有空间时，会发生什么？ 可以看到，当横向空间不足，整个元素自动横向收缩。由于字必须显示，因此换行到了第二行。只有一行只有一个单词的时候，才会溢出（因为不能截断单词） 这种行为由 flex 属性控制，它是以下三个属性的缩写： flex-grow（控制放大） flex-shrink（控制收缩） flex-basis（控制元素的基础大小） 默认情况下，设置为 flex: 0 1 auto 也就是说，上面的代码，与下面都是等效的。 .content{ border: 1px solid red; flex: 0 1 auto; } /* 或者，和下面也是等效的 */ .content{ border: 1px solid red; flex-grow: 0; flex-shrink: 1; flex-basis: auto; } 我知道你很急，但你先别急。接下来我们就来看看这三个属性。 flex-grow/shrink 这个元素控制了元素是否伸展，以及不同元素之间的伸展比例。 试一试，把上面值从 0 改成 1。 发现了吗？现在，元素自动占满了整个空间。也就是说，设定为 0，就是不伸展，非 0，就是允许伸展。 为什么说非 0 呢？ 因为这个数字表示比例。 也就是说，如果你给不同元素设定不同数字，那么它们就会按照不同的比例进行缩放。 比如…… .content1{ flex-grow: 1; } .content2{ flex-grow: 2; } .content3{ flex-grow: 3; } 自己试一试，你会发现它们按照 1：2：3 进行放大。 也就是说，设定为 100：100 和 1：1 的效果是完全一致的。 收缩也同理啦。0 不允许收缩。其它数字就是收缩比例。 flex-basis 你有没有发现，我们上面都在讨论缩放。 当我们谈到缩放时，是对原先就有的东西，进行缩小和放大。 而 flex-basis，就是定义这个“缩放基准”。默认情况下，会根据你的文字长度自动决定，也就是 auto。 现在我们先把放大关掉，然后尝试改变窗口大小： .content{ border: 1px solid red; flex: 0 1 200px; } 看到了吗？当达到 200px 的时候，不再放大，因为不允许放大。200px 为一个基准。 实际上，使用 width 也可以达到同样的效果。但是，flex-basis 的优先级更高，并且方向会随着 flex 方向改变。 下面，我们就来聊聊 flex 的方向。 flex 的轴 看完了放缩，是时候看看 flex 布局元素的方向了！ flex 有两根轴，分别称作主轴和交叉轴。 在默认情况下，它们如下排列： 元素沿着主轴堆叠。 但是，你也可以手动更改。 用到的属性是 flex-direction。写在容器里面。上面的默认值为 row。现在我们改成 column 试试。