Flexbox 大小调整综合指南

flexbox 调整大小使得创建完全适应屏幕的灵活布局成为可能。如果您正确设置所有内容，您将不必依赖媒体查询来支持不同的视口、布局和方向。

在本指南中，我将向您展示如何使用以下 flexbox 大小属性：

• flex-grow

• flex-shrink

• flex-basis

• flex 

填满可用空间

编写 css 最具挑战性的方面之一是弄清楚如何在页面填充内容后分配屏幕上剩余的可用空间。在某些视口尺寸下，您经常会发现剩余空间过多，您想用一些东西填充它。在其他视口尺寸下，您可能会发现空间不足，并且布局以一种或另一种方式中断。

Flexbox 的大小调整属性允许您对三种场景做出决定：

1. flex-grow:自由空间过剩时弹性项目应该如何表现（它们应该如何 增长）。

2. flex-shrink：当可用空间不足时弹性项目应该如何表现（它们应该如何 收缩）。

3. flex-basis: 当空间刚好满足需要时，弹性项目应该如何表现。

由于 flexbox 是一维布局，而不是二维的 CSS Grid，您可以沿主轴分配空闲空间（无论是从上到下、从下到上、从左到右还是从右到左） . flex-direction您可以使用该属性设置主轴的方向。如果你需要重新了解它的工作原理，请查看我的关于flexbox 对齐的教程。

flex-direction在从左到右的网站上最常用 的是row，这意味着您可以在从左到右的轴上分配可用空间。这也恰好是 的默认值 flex-direction，因此我将在以下示例中使用它。

1. 积极的自由空间：flex-grow

该flex-grow属性定义了如何在屏幕上分配弹性项目之间的任何额外空间。关于 flexbox 大小要记住的最重要的一点是，flex-grow 它不会分割整个 flex 容器，只会分割浏览器渲染所有 flex 项后剩余的空间。如果没有多余的空间， flex-grow就没有效果。

 让我们从以下 html 开始：

该类  .container 将是 flex 容器（由 定义display: flex;），我们的 .item 元素将是 flex 项：

.container {

  background-color: darkslategrey;

  padding: 1rem;

  display: flex;

  flex-direction: row;

}

.item {

  font-size: 2rem;

  line-height: 1;

  text-align: center;

  width: 3rem;

  padding: 2rem 1rem;

  background: #e2f0ef;

  border: 3px solid #51aaa3;

  color: #51aaa3;

  margin: 0.375rem;

}

在不告诉浏览器如何处理剩余空间的情况下，这就是弹性项目在屏幕上的分配方式：

See the Pen  Flexbox sizing without flex-grow by Envato Tuts+ (@tutsplus)  on CodePen.

浏览器使用了 的默认值flex-grow，即0，并给我们带来了完全的不灵活性。flex-grow 对于某些布局，这种安排可能是一个很好的解决方案，但是，您也可以通过设置来使项目覆盖整个空间1：

.item {

  flex-grow: 1;

}

正如您在下面看到的，弹性项目已经伸展并填满了整个可用空间：

See the Pen  Flexbox sizing with flex-grow: 1 by Envato Tuts+ (@tutsplus)  on CodePen.

在上面的例子中，所有的弹性项目都有相同的flex-grow值，所以它们以相同的速度增长。但是，你也可以让它们按照不同的比例增长。例如，.item-1可以占用两倍于其他项目的可用空间。我们会这样写：

.item {

    flex-grow: 1;  

}

.item-1 {

    flex-grow: 2;

}

同样，您可以flex-grow为每个弹性项目设置不同的值，以使它们相对于彼此增长。玩转这个例子中的值，看看它们如何影响布局：

See the Pen  Flexbox sizing with flex-grow (dynamic) by Envato Tuts+ (@tutsplus)  on CodePen.

2.负自由空间：flex-shrink

该flex-shrink属性是相反的flex-grow。它定义了当屏幕上没有足够的空间时弹性项目应该如何表现。当弹性项目大于弹性容器时会发生这种情况。

如果没有flex-shrink，以下 CSS 将导致项目溢出容器的布局，因为项目的总宽度 (3*10rem) 大于容器的宽度 (20rem)。

.container {

    width: 20rem;

    padding: 1rem;

    background-color: darkslategrey;

    display: flex;

    flex-direction: row;

}

.item {

    width: 10rem;

    padding: 2rem 1rem;

    font-size: 2rem;

    line-height: 1;

    text-align: center; 

    background: #e2f0ef;

    border: 3px solid #51aaa3;

    color: #51aaa3;

    margin: 0.375rem;

}

对我们来说很高兴的flex-shrink是，它采用默认值1，为我们提供了一个布局，即使没有足够的空间，项目也可以放入容器中：

当flex-shrinkis时1，弹性项目是完全灵活的，当没有足够的空间时，它们会与弹性容器一起收缩。 

遵循相同的逻辑，当屏幕上有负空间时，您可以使弹性项目完全不灵活。您只需设置flex-shrink为0 ，项目就会溢出 flex 容器：

.item {

    flex-shrink: 0;

}

与 类似flex-grow，您也可以flex-shrink为每个弹性项目设置不同的值，以便它们可以相对收缩。使用此示例中的值，看看它们有什么影响：

See the Pen  Flexbox sizing with flex-shrink (dynamic) by Envato Tuts+ (@tutsplus)  on CodePen.

测试上面的演示你可能已经注意到较大的flex-shrink值会导致更窄的弹性项目。例如，以下 CSS 会导致布局中.item-3最窄的项：

.item-1 {

   flex-shrink: 1;

}

.item-2 {

   flex-shrink: 1;

}

.item-3 {

   flex-shrink: 2;

}

这是因为flex-shrink定义了一个弹性项目与其他项目相比应该缩小多少。因此，较大的flex-shrink值会导致较小的元素，这会使事情变得非常混乱！

3.没有剩余空间：flex-basis

空闲空间分配的最后一种情况是屏幕上的空间完全符合您的需要。这是弹性项目将采用flex-basis. 

该flex-basis属性定义弹性项目的初始大小。默认值为，这意味着弹性项目的大小是使用元素的 或 计算flex-basis的（取决于它是基于行的布局还是基于列的布局）。 autowidthheight

但是，当 的值flex-basis不是auto时，它会覆盖 的值 width（或height在垂直布局的情况下）。例如，以下 CSSwidth: 20rem;使用每个弹性项目的相应值覆盖默认规则：

.item {

    width: 20rem;

    padding: 2rem 1rem;

    font-size: 2rem;

    line-height: 1;

    text-align: center; 

    background: #e2f0ef;

    border: 3px solid #51aaa3;

    color: #51aaa3;

    margin: 0.375rem;

}

.item-1 {

   flex-basis: 5rem;

}

.item-2 {

   flex-basis: 10rem;

}

.item-3 {

   flex-basis: 30rem;

}

See the Pen  Flexbox sizing flex-basis by Envato Tuts+ (@tutsplus)  on CodePen.

除了长度单位、百分比和auto，您还可以使用content关键字作为 的值flex-basis。它将使弹性项目与它所包含的内容一样宽。

由于flex-basis定义了弹性项目的初始值，它是 浏览器用来计算 和的基础。请注意，虽然和具有相对值（、、等），但始终采用绝对值（、、等）。flex-growflex-shrinkflex-growflex-shrink012flex-basispxremcontent

flex 速记

Flexbox 的尺寸属性也有一个简写形式，叫做flex. 该flex属性缩写为 flex-grow, flex-shrink, 和flex-basis 以下列方式：

/* Longhand form of default values */

.item {

  flex-grow: 0;

  flex-shrink: 1;

  flex-basis: auto;

}

/* Shorthand form of default values */

.item {

    flex: 0 1 auto;

}

如果您不想要，您不一定必须列出所有三个值。flex根据以下规则和假设，您可以使用一个或两个值：

/* One relative value: flex-grow */

flex: 1;

/* One absolute value: flex-basis */

flex: 20rem;

flex: 50px;

/* One relative and one absolute value: flex-grow | flex-basis */

flex: 1 20rem;

/* Two relative values: flex-grow | flex-shrink */

flex: 1 2;

/* Three values: flex-grow | flex-shrink | flex-basis */

flex: 1 2 20rem;

/* Fully inflexible layout: equivalent of flex: 0 0 auto */

flex: none;

习惯 flex 速记可能需要一段时间，但 W3C 文档实际上 建议 使用它，而不是速记属性：

“鼓励作者使用 flex 速记而不是直接使用其速记属性来控制灵活性，因为速记正确地重置了任何未指定的组件以适应常见用途。”

结论

我们做到了：您可以使用 flexbox 的尺寸属性完全控制灵活性！在本教程中，我使用了由 设置的水平布局flex-direction: row，因此空间分配发生在水平（从左到右）轴和flex-grow，  flex-shrink，并flex-basis 修改了弹性项目的宽度。