🈳 🍆 🙍🏾 检查CSS flex属性 🏜️ 🏇🏻 👨🏼‍⚖️

有没有想过CSS速记属性如何工作flex？它可以让你设置属性值flex-grow，flex-shrink和flex-basis。我注意到该属性最常在view中使用flex: 1，它允许flex项拉伸以占用可用空间。在本文中，我想谈一谈速记属性和使用它设置的属性。我将讨论何时以及为什么可以使用这些属性，我将给出一些实际的例子。

flex

弹性增长属性

CSS属性flex-grow用于调整所谓的弹性增长因子，该因子允许这些元素拉伸以填充可用空间。只能将整数用作此属性的值。让我们来看一个例子。

这是HTML标记：

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

以下是样式：

.wrapper {
    display: flex;
    flex-wrap: wrap;
}

.item {
    flex-grow: 1;
}

属性flex-grow可以影响元素的宽度或高度，具体取决于属性的值flex-direction。考虑以下示例时，请记住，它们使用的属性flex-direction设置为默认值（row）。如果不是这种情况，我将告诉您。

请注意，不使用时flex-grow，弹性项目将被设置为其默认宽度，该宽度等于其原始宽度。如果使用flex-grow: 1，则可用的可用空间将分配到各个元素之间。

以上，flex-grow属性不适用。以下是flex-grow：1您

可能想知道flex项目之间的可用空间分配情况如何。这是一个很好的问题。我会尽快回答。

下图显示了在不使用属性的情况下元素的外观flex-grow。换句话说，此处以正常大小显示项目。

不使用flex-grow属性

要了解弹性项目的宽度是如何计算的，请看下面的公式。我在萨曼莎·明（Samantha Ming）的资料中找到了这些公式（为此我感谢她！）。

让我们计算第一个元素的宽度-包含text的元素CSS。

查找元素的宽度

因此，此处使用以下公式：

  = ((flex-grow  /   flex-grow) *  ) +

让我们分析一下这个公式：

flex-grow 是为物料指定的增长因子。
flex-grow 是所有元素的增长因子的值的总和。
-这是容器的自由空间，在使用机制之前位于容器中flex-grow。
-您可能会猜到，这是元素的宽度，然后用更改flex-grow。

将实际值代入该公式将得出以下结果：

  = ( (1 / 3) * 498) + 77 = 241

不同项目的不同弹性增长值

在上一个示例中，所有flex项目都使用了相同的值flex-grow。现在，让我们尝试为第一个元素分配一个属性flex-grow: 2。现在如何计算元素的宽度？在考虑以下公式时，请记住，在我们的示例中，可用空间的宽度为498px。

在不同元素具有不同伸缩增长的情况下查找元素的宽度

如您所见，它使用与上面讨论的相同的机制来计算元素的宽度。主要区别在于flex-grow将第一个元素的值设置为2，这反映在用于计算元素宽度的公式中。

可以将0用作弹性增长值吗？

当然可以！由于该属性flex-grow接受整数值，因此可以将其写入0。这意味着我们不希望flex项目调整大小以占用容器的某些可用空间。

将Flex-Grow属性设置为0的后果

如您所见，分配了该属性的元素flex-grow: 0不会更改宽度。当您希望弹性项目保持其原始宽度时，此技术很有用。

Flex-grow不能使物品相同

有一个普遍的误解，即用法flex-grow允许匹配元素具有相同的宽度。这是错误的。使用的目的flex-grow是在元素之间分配可用空间。通过分析上述公式可以看到，弹性项目的最终宽度是根据其原始宽度（即应用之前的宽度flex-grow）计算的。

如果您需要使特定集合中的所有元素都具有相同的宽度，请知道可以使用属性来执行此操作flex-basis。我们将在下面讨论。

柔缩特性

该属性flex-shrink使您可以设置所谓的弹性收缩系数。如果所有弹性项目均大于其容器，则这些项目将按比例缩小以匹配其分配的属性值flex-shrink。

flex-shrink属性分配给中心项目：1

以下是此示例的样式：

.item-2 {
    width: 300px;
    flex-shrink: 1;
}

满足以下条件时，浏览器将使元素的宽度item-2相等300px：

所有元素的总宽度小于容器的宽度。
页面视口宽度等于或大于元素宽度。

这是上一示例中的元素在不同宽度的视口中显示时的行为。

只要屏幕上有足够的空间显示文本，元素的宽度就

不会缩小，如您所见，元素的宽度不会缩小，只要有足够的空间就可以保持其宽度300px。

弹性基础属性

该属性flex-basis设置弹性项目的基本大小，然后根据flex-grow和属性设置的灵活性因素分配可用空间flex-shrink。默认情况下，对于auto和以外的所有值content，该值flex-basis等于元素的宽度，并且在使用属性时flex-direction: column，其值等于高度。

该属性flex-basis接受width和属性可以采用的相同值height。默认值为auto基于该值设置的默认值content。该值content是根据弹性项目内容的大小自动设置的。

让我们将item-1以下样式应用于示例中的元素：

.item-1 {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 50%;
}

flex-basis属性的用法：50％

在这里，第一项分配了一个propertyflex-basis: 50%。同时，将其重置为0属性很重要flex-grow，这将使您确保元素的大小不超过50%。

如果您改为向属性写入flex-basis值会100%怎样？这将导致该元素占据父元素宽度的100％，而其他元素将换行。

以下是相关样式：

.item-1 {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 100%;
}

使用flex-basis属性的结果是100％；

速记flex属性

该物业flex允许，在速记格式，设置属性值flex-grow，flex-shrink和flex-basis。此属性的默认值为auto。它匹配flex: 0 1 auto。这意味着它允许弹性项目根据其内容的大小而增长。

在这种情况下，我谨提请您注意一个重要的细节。我们正在谈论具有绝对和相对尺寸的弹性物品。顺便说一下，这与CSS定位无关。这适用于flexbox模型。

弯曲具有相对尺寸的物品

这是CSS：

.item {
    /* ,   ,  flex: 1 1 auto */
    flex: auto;
}

此处，弹性项目根据其内容确定大小。结果，具有更多内容的项目将显得更大。

具有更多内容的元素将具有更多

具有绝对尺寸的柔性物品

如果与前面的示例不同，如果将该属性flex-basis设置为value 0，则这将导致所有flex项目增长到相同大小。

这是样式：

.item {
    /*  flex: 1 1 0% */
    flex: 1;
}

项目大小相同

我喜欢的Flex属性功能

该属性的名字flex暗示它可以灵活地使用传递给它的值。这给了我一些吸引人的功能。让我们看一些例子。

without无单位的单值

这是CSS：

.item {
    flex: 1;
}

在此，将flex一个没有单位的单个值写入property 。该值将由系统解释为属性的值flex-grow。其等效形式将如下所示flex: 1 1 0。

values无单位的两个值

让我们看一下以下样式：

.item {
    flex: 1 1;
}

在这里，我们分别显式设置值flex-grow和flex-shrink。这flex-basis将重置为默认值。

representing表示一定大小的单个值

让我们谈谈如何“解码”以下样式：

.item {
    flex: 100px;
    /* flex: 1 1 100px */
}

该值100px将被系统视为值flex-basis。而在flex-grow和flex-shrink意志，在默认情况下，被写入1。

0在不指定单位的情况下使用0

假设您要使用属性设置flex-basis为一个值。为了解决这个问题，我们将决定这样做：0flex

.item {
    flex: 0;
}

不建议这样做，因为它会使阅读此类代码的人和浏览器感到困惑。如何理解-这到底指的是0什么？到物业flex-grow，flex-shrink还是flex-basis？总的来说，这种混乱是事实。这是CSS规范对此的描述：

没有度量单位的零，在其之前没有两个细长值的情况下，应将其解释为细长值。为避免误解或误导属性声明，在将flex-basis指定为零或在此值之前带有两个flex-basis值时，作者应使用单位。

也就是说，为了避免歧义，上述代码应按以下方式重写：

.item {
    flex: 0%;
    /* flex: 1 1 0% */
}

这里0%使用了一个构建，但是您可以例如使用一个构建0px。

使用简写的flex属性

当你需要设置属性flex-grow，flex-shrink而且flex-basis，最好是使用一个速记属性flex。

看一下CSS规范：

鼓励作者使用flex速记属性而不是直接使用完全限定的属性名称来管理flex项，因为应用shorthand属性将正确地将未指定的值重置为与常用用途相对应的状态。

用例和实际示例

▍用户头像

配置了flex属性

的化身flexbox模型通常用于设置与用户相关的页面组件的样式。例如，这涉及用户的化身和相应的签名，必须在同一行上。

这是标记：

<div class="user">
    <img class="user__avatar" src="shadeed.jpg" alt="" />
    <div>
        <h3>Ahmad Shadeed</h3>
        <p>Author of Debugging CSS</p>
    </div>
</div>

这是样式：

.user {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.user__avatar {
    flex: 0 0 70px;
    width: 70px;
    height: 70px;
}

请注意，在设置元素时user__avatar，我应用了属性flex: 0 0 70px。这很重要，因为如果没有此设置，图像可能无法在某些过时的浏览器中正确显示。而且，该属性flex的优先级高于该属性的优先级width（在涉及其应用的情况下flex-direction: row）和该属性height（在其应用的情况下flex-direction: column）。

如果更改化身的大小（仅影响该属性）flex，浏览器将忽略该属性中设置的内容width。相关样式如下：

.user__avatar {
    /*   100px,   70px */
    flex: 0 0 100px;
    width: 70px;
    height: 70px;
}

▍元素标题

元素标题

假设我们需要设置元素标题的样式。该标题应占据所有可用空间。您可以使用属性来解决此问题flex: 1：

.page-header {
    display: flex;
    flex-wrap: wrap;
}

.page-header__title {
    flex: 1;
}

▍用于准备消息的输入字段

像这样的输入框字段通常在消息应用程序中找到，例如在Facebook和Twitter上找到的那些。这样的字段应该占据所有可用空间。在这种情况下，用于发送消息的按钮必须具有固定的宽度。这是在CSS中的外观：

form {
    display: flex;
    flex-wrap: wrap;
}

input {
    flex: 1;
    /*   */
}

此示例很好地演示了如何使用属性flex-grow。

应该注意的是，flex在专门讨论该属性的出版物中，使用该属性的某些方法未给予足够的重视。让我们解决这个问题。

▍对齐不同卡上的底部元素

我们的目标是使两个日期都与红线对齐，

假设我们有一个CSS Grid布局，其中有两列。这里的问题是卡文本内容末尾显示的日期未对齐。我们需要它们位于上图中所示的同一行上。

flexbox模型可用于解决此问题。

这是标记：

<div class="card">
    <img src="thumb.jpg" alt="">
    <h3 class="card__title">Title short</h3>
    <time class="card__date"></time>
</div>

您可以通过使用属性来实现我们的目标flex-direction: column。card__title可以通过应用属性flex-grow并使其占用所有可用空间来设置元素（标题）的样式。结果，结果是日期行将出现在卡片的底部。即使标题本身足够短，也会发生这种情况。

以下是样式：

.card {
    display: flex;
    flex-direction: column;
}

/*   */
.card__title {
    flex-grow: 1;
}

无需诉诸财产即可解决此问题flex-grow。也就是说，我们正在谈论使用flexbox模型和一种使用keyword自动设置边距的机制auto。顺便说一句，我写了一篇有关此的详细文章。

/*   */
.card__date {
    margin-top: auto;
}

对细长因子使用不同的值

在本节中，我想谈谈使用属性flex-grow以及flex-shrink为分配值以外的属性1。现在，我将给出一些使用类似方案来设置这些属性的实际示例。

▍控制面板

一组控件

在此示例中，我受到Facebook设计的启发（我也从那里获取了图标）。控制面板（actions以下代码中的项目）有四个项目。最后一个元素（elementactions__item.user）的宽度小于其他元素的宽度。您可以这样创建一个控制面板：

.actions {
    display: flex;
    flex-wrap: wrap;
}

.actions__item {
    flex: 2;
}

.actions__item.user {
    flex: 1;
}

▍将元素拉伸的动画

当您将元素悬停在元素上时，

Flex项目可以进行动画处理。此技术可能非常有用。以下是相关的CSS：

.palette {
    display: flex;
    flex-wrap: wrap;
}

.palette__item {
    flex: 1;
    transition: flex 0.3s ease-out;
}

.palette__item:hover {
    flex: 4;
}

在这里，您可以找到一个视频，演示了所有操作。

增加活动卡的大小

我真的很喜欢CodePen上的这个项目，该项目实现了一种机制，可以通过用户单击的费率计划说明来增加卡的大小。通过将卡的属性设置flex-grow为value来调整其大小4。

增加活动卡的大小

if如果容器中的物品大于容器本身怎么办？

物品无法放入容器中

一段时间前，我收到一位读者的电子邮件，该电子邮件告诉我他遇到的问题，并寻求解决方案的帮助。该问题的实质已在上图中呈现。这里应该有两个图像应该在容器元素内，但是这些图像比容器大。

让我们试试这种风格：

.wrapper {
    display: flex;
}

.wrapper img {
    flex: 1;
}

但是即使使用这些属性，flex: 1图像也不会放置在容器中。请参考CSS规范：

Flex项默认情况下不会缩小到其内容的大小（最长的单词或固定大小的元素的长度）。要更改此设置，您需要使用min-width或min-height属性。

在我们的案例中，问题在于图像太大，以至于Flexbox模型无法调整大小以适合容器。您可以这样解决：

.wrapper img {
    flex: 1;
    min-width: 0;
}

有关详细信息，请参见我的这篇文章。

结果

在这里，我向您介绍了该物业flex及其使用方法。希望您从此材料中学到新的有用的东西。

您是否在项目中使用flex CSS属性？

检查CSS flex属性