Flex是CSS3之后开始的一种布局方法。它主要由父容器和子容器组成，父容器有六个属性：

主轴控制：Flex方向Row：水平轴（默认） Row inversion：水平轴反转Column：垂直轴Column inversion：垂直轴反转换行模式：Flexwrap nowrap：不换行（默认） Wrap：RowWrap Wrap -Reverse：反行wrapping 主轴对齐：justify-content 横轴对齐：align-items 轴与换行组合设置：flex-flow（流向） 该属性通常很少使用。子项的布局顺序、向前和向后子项也有六个属性：

灵活扩展：flex-grow指定容器剩余空间时的分配规则。默认值为0，flex-shrink：flex-shrink指定容器中有多余空间时的分配规则。默认值为1，如果空间不足则分配0空间。这意味着没有分配基本大小。 flex-basis 指定主Flex 元素的初始大小（基本大小）。 axis 的默认值为auto，即项目本身的大小。 缩写：flex flex-grow、flex-shrink、flex-basis 默认值为0 1 自动主轴顺序：轴向对齐：align-self 一般来说，父容器控制整体布局，子容器控制其子容器的布局。

在采访中，通常不会问您想要报道多少内容。弹性面试中最常见的问题是：

如何理解flex: 0 1 auto到底代表什么以及它的应用场景是什么？flex: 0、flex: 1、flex: none、flex: auto分别代表什么？要回答这些问题，您需要了解child flex 属性。

flex 语法

flex: none | [ 'flex-grow' 'flex-basis' ]; 单个管道字符| 即支持该符号前后的属性值，不能同时出现。因此，支持以下语法：

flex: auto;flex: none;flex: [ 'flex-grow' 'flex-shrink' ?| 'flex-basis' ]; 方括号[.] 表示范围。支持的属性在此范围内

? 表示0 或1，表示不需要flex-shrink 属性。 flex 属性值也可以是两个值，所以

flex: auto;flex: none;/* 2 个值*/flex: 1 100px;/* 3 个值*/flex: 1 1 100px;双管道||，表示“或”。这意味着正面和背面可以独立使用。所以flex: flex-grow flex-shrink和flex-basis都是合法的。所以还有两种合法的写法。

/* 一个值，flex-basis */flex: 100px; /* 两个值，flex-grow 和flex-shrink */flex: 1 1;

当一个flex属性值只有一个值时，可能出现三种情况：

诸如flex: 1 之类的无单位数字表示flex-shrink: 1 ，即剩余的可扩展空间。此时flex-shrink和flex-basis的值分别为1和0%。注意这里的flex-basis值为0%，不是默认值auto。只要改变flex:编号，flex-basis值为0。有效宽度（width）值以长度表示。一个值（如flex: 100px）代表flex-basis: 100px，基础尺寸为100px。目前，flex-grow和flex-shrink的值都是1。注意这里的flex-grow的值为1，而不是默认值0。关键字none、auto 或初始双值的语法：

如果flex 属性值有两个值，则第一个值必须是flex-grow，第二个值代表不同的CSS 属性，具体取决于值类型。具体规则如下：

值：例如，flex: 1 2，其中2代表flex-shrink。在这种情况下，flex-basis 值不是默认的自动长度值。例如，对于flex: 1 100px，100px 的值为：对于flex-basis，flex -shrink 的默认值为0。三值语法：

如果flex属性值有三个值，则length值代表flex-basis，其余两个值分别代表flex-grow和flex-shrink。下面两行CSS语句在语法上都是有效的并且具有相同的含义：

flex: 1 2 50%；flex: 50% 1 2；

转为文字表述

flex 默认值为0 1 自动。还有很多其他值

flex: 无，相当于flex: 0 0；flex: 自动，相当于flex: 1 1 0%；flex: 0，相当于flex 0 1 0%；

单值语法说明flex:Initial flex: 0 1 auto 初始值，常用flex: 0 flex: 0 1 0% 少数场景适用flex: 无flex: 0 0 auto 推荐flex: 1 flex: 1 1 0% 推荐0 auto 6 0 1 1 自动，少数适用场景

相当于

flex 属性值场景应用

flex:0 1 自动。这意味着如果有剩余空间(flex-grow: 0)，Flex 容器的大小将不会增长。如果尺寸不足，Flex 容器会缩小尺寸(flex -shrink:1)，尺寸会适应内容(flex -basis:auto)

我的理解：如果子item的总长度小于整个容器，则不会被填充（flex-grow:0），但是一旦总长度被填充，它将根据其实际宽度和高度存在（flex-basis:auto） 。如果子项比整个容器大，则子项将相对较满。 Yu的相对收缩（flex-shrink:1）。

默认值 flex: initial

适用于子项总长度小于整个容器的场景，例如按钮、标题、小图标等widget的布局。

适用场景

flex: 0 相当于设置flex: 0 1 0%，flex:none 相当于设置flex: 0 0 auto

flex: 0，是一个值，也是一个数字，代表flex-grow。然后我发现如果我只设置flex:数字，flex-basis将自动为0%。具有flex:0 的元素表示为最小内容宽度。

消息：

Flex: 1===Flex: 1 1 0%

Flex: 0===Flex: 0 1 0%

当你将flex设置为数字时，flex-basis是最小宽度，但前者的flex-grow有一个值，允许子项增长以填充容器，而后者的值为0并且不会增长。

flex: 无，无数字或长度值，无关键字。 flex: 0 0 auto 表示元素不会缩小或增大。此外，flex-basis: auto 意味着固定大小由内容决定，因为元素不会拉伸并且其中的元素不会换行。大小通常表现为内容的最大宽度

flex: 0 和 flex: none 的区别

flex: 0 应用场景

左边内容的宽度就是图像的宽度，与文本内容如何设置无关。

适用使用 flex: 0 的场景

flex 如果子项的宽度是内容的宽度并且内容不换行，则flex:none 是一个不错的选择。例如，在下面的场景中，图像和按钮的长度是固定的，但内容是灵活的。

flex:无适用场景

适合使用 flex: none 的场景

flex:1相当于设置flex: 1 1 0%，flex: auto相当于设置flex: 1 1 auto。

可以看到，flex-grow 和flex-shrink 是一样的。这意味着它们可以弹性扩展和收缩。不同之处在于flex: 1的flex-basis为0，这意味着它的宽度为0。 flex:auto 的flex-basis 是auto。也就是说，宽度是它自己的宽度。

性能看起来像这样：

柔性：1

一开始我不太明白，所以这里需要解释一下。公式为：

每个子项的宽度=（总宽度- flexbase 宽度）/3（参见此示例）

flex:1的flex-basis宽度为0，因此即使每个子项的总宽度增长或缩小，它也可以被平均划分。

flex: 1 和 flex: auto 的区别和适用场景

当您希望元素充分利用剩余空间而不占用其他元素的宽度（例如在全部均匀分割的列表中）时，应用flex:1 是合适的。

在前面应用flex: none的示例中，您也可以将文本部分设置为flex: 1来达到类似的效果。

柔性：1

适用于 flex: 1 的场景

当您想要充分利用元素的剩余空间，但每个大小根据其内容分配时，适用于flex: auto。

例如，flex: auto适用于导航次数不固定且每页导航字数也不固定时的导航效果。

柔性汽车

让我们回顾一下之前介绍的面试问题。

如何理解flex: 0 1 auto到底代表什么以及它的应用场景是什么？flex: 0、flex: 1、flex: none、flex: auto分别代表什么？回答第一个问题

flex 的默认值为0 1 auto。这意味着如果有多余空间，容器将不会膨胀，如果空间不足，容器将收缩。子项的宽度根据其自身的宽度显示。

回答第二个问题

请考虑一下。如果flex的值为一个值和一个数字，而flex-grow:1是一个数字，则flex-basis自动为0，所以具体表示为flex:1 1 0%。这是容器内剩余的额外空间。如果足够，它就会扩大，如果不够，它就会缩小。子项的宽度为0。通常适用于合理布局，您希望在不侵犯其他元素宽度的情况下充分利用剩余空间。

回答第三个问题

flex:0 (flex: 0 1 0%) 表示如果有剩余空间，容器不会扩展，如果没有足够的空间，容器会收缩。子项的宽度为0。这适用于被替换元素的父元素。

flex:1，参见第二个答案

flex: none、flex: 0 0 auto，表示容器空间有余则不扩展，空间不足则不收缩。子项目有自己的宽度，适合扩展内容。没有包装或一些小控制元素。

flex: auto (flex: 1 1 auto) 表示如果有剩余空间，容器将扩展，如果没有足够的空间，容器将收缩。子项宽度是其自身的宽度，适合根据子项宽度动态调整的布局。内容（例如，导航编号或文本长度不固定）

flex:initial 表示flex: 0 1 auto，如果容器剩余空间较多，则不会扩展，否则会收缩。子项的宽度将是它自己的宽度。小控制元素的布局或动态更改特定项目内容的布局。

适用于 flex: auto 的场景

Flex:0 Flex:1 Flex:none Flex:auto 在什么场景下应该使用它？ 深入了解CSS Flex 属性通过MDN Web 文档掌握Flex 布局

版权声明：本文由今日头条转载，如有侵犯您的版权，请联系本站编辑删除。