flexbox_Flexbox尺寸综合指南

flexbox

使用Flexbox调整大小，可以创建完全适合屏幕的灵活布局。 如果正确设置所有内容，则不必依靠媒体查询来支持不同的视口，布局和方向。

在本指南中，我将向您展示如何使用以下flexbox尺寸设置属性：

• flex-grow
• flex-shrink
• flex-basis
• flex

填满可用空间

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

Flexbox的大小设置属性使您可以针对以下三种情况做出决策：

1. flex-grow ：当有可用空间的盈余 （他们应该如何成长 ）柔性物品应该如何表现。
2. flex-shrink ：当可用空间不足 （应该如何收缩 ）时，flex项目应如何表现。
3. flex-basis ：当有足够的空间时，flex项目应该如何表现。

由于flexbox是一维布局，而CSS CSS Grid是二维布局，因此您可以沿主轴分配自由空间（无论是从上到下，从下到上，从左到右还是从右到左） 。 您可以使用flex-direction属性设置主轴flex-direction 。 如果需要有关其工作原理的复习，请查看我有关flexbox对齐的教程。

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

1.正向自由空间：弹性增长

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

让我们从以下HTML开始：

<div class="container">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
</div>

.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; 
}

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

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

.item {
  flex-grow: 1;
}

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

在上面的示例中，所有弹性项目都具有相同的flex-grow值，因此它们以相同的速率增长。 但是，您也可以使它们根据不同的比例增长。 例如， .item-1可以占用的可用空间是其他项的两倍。 我们将这样写：

.item {
    flex-grow: 1;   
}
.item-1 {
    flex-grow: 2;
}

同样，您可以为每个弹性项目设置不同的flex-grow值，以使它们相对增长。 在此示例中使用这些值，并查看它们如何影响布局：

2.负自由空间：伸缩

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-shrink为1 ，flex项是完全柔性的，而当空间不足时，它们会与flex容器一起收缩。

按照相同的逻辑，当屏幕上出现负数空间时，可以使弹性项目完全不变形。 您只需要将flex-shrink设置为0 ，项目就会溢出flex容器：

.item {
    flex-shrink: 0;
}

与flex-grow相似，您还可以为每个flex项目设置不同的flex-shrink值，以使它们可以相对收缩。 在此示例中试用这些值，并查看它们的影响：

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

.item-1 {
   flex-shrink: 1;
}
.item-2 {
   flex-shrink: 1;
}
.item-3 {
   flex-shrink: 2;
}

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

3.无剩余空间：flex-basis

可用空间分配的最后一种情况是屏幕上的空间恰好满足您的需要。 这是flex项目将采用flex-basis的值的时候。

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

但是，当flex-basis的值不是auto ，它将覆盖width （或在垂直布局的情况下为height ）的值。 例如，以下CSS会覆盖默认width: 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;
}

除了长度单位，百分比和auto ，还可以将content关键字用作flex-basis的值。 它将使flex项与其所容纳的内容一样宽。

由于flex-basis定义弯曲项目的初始值，这是基础的浏览器用来计算flex-grow和flex-shrink 。 注意，虽然flex-grow和flex-shrink具有相对值（ 0 ， 1 ， 2 ，等）， flex-basis总是乘绝对值（ px ， rem ， content等）。

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文档实际上建议使用它，而不是longhand属性：

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

结论

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

如果您采用我们介绍的内容，并将其应用于由flex-direction: column设置的垂直布局，分配将沿垂直轴（顶部到底部）进行，并且大小设置属性将修改flex项目的高度 。

翻译自: https://webdesign.tutsplus.com/tutorials/a-comprehensive-guide-to-flexbox-sizing--cms-31948

flexbox