Css 弹性基础和宽度之间有什么区别？_Css_Flexbox_Width

Css 弹性基础和宽度之间有什么区别？

css

Css 弹性基础和宽度之间有什么区别？,css,flexbox,width,Css,Flexbox,Width,有很多关于这方面的问题和文章，但据我所知，没有任何结论。我能找到的最好的总结是 flex basis允许您在计算任何其他内容之前指定元素的初始/起始大小。它可以是百分比或绝对值 …这本身并不能说明flex basis集合元素的行为。以我目前对flexbox的了解，我不明白为什么它不能描述宽度我想知道flex basis与width在实践中的具体区别：如果我用flex basis替换宽度（反之亦然），视觉上会发生什么变化如果我将两者都设置为不同的值，会发生什么？如果它们具有相同的值，会发生

有很多关于这方面的问题和文章，但据我所知，没有任何结论。我能找到的最好的总结是

flex basis允许您在计算任何其他内容之前指定元素的初始/起始大小。它可以是百分比或绝对值

…这本身并不能说明flex basis集合元素的行为。以我目前对flexbox的了解，我不明白为什么它不能描述宽度

我想知道flex basis与width在实践中的具体区别：

如果我用flex basis替换宽度（反之亦然），视觉上会发生什么变化
如果我将两者都设置为不同的值，会发生什么？如果它们具有相同的值，会发生什么
在某些特殊情况下，使用宽度或弯曲基准与使用其他基准有显著差异吗
当与其他flexbox样式（如flex wrap、flex grow和flex shrink）结合使用时，宽度和flex basis有何不同
还有其他显著差异吗

编辑/澄清：这个问题在中以不同的格式提出，但我觉得更直接地比较或总结弹性基础和宽度（或高度）的差异会更好。

考虑

弹性方向

阅读问题时首先想到的是

flex-basis

并不总是适用于

width

当

弹性方向

为

行

时，

弹性基准

控制宽度

但当

flex-direction

为

column

时，

flex-basis

控制高度

关键区别以下是

弹性基础

和

宽度

高度

之间的一些重要区别：

```
弹性基础
```
仅适用于弹性项目。弹性容器（不属于弹性项目）将忽略
```
Flex-basis
```
，但可以使用
```
width
```
和
```
height
```
```
flex basis
```
仅在主轴上工作。例如，如果您位于
```
flex-direction:column
```
，则需要
```
width
```
属性来水平调整flex项目的大小
```
flex-basis
```
对绝对定位的flex项目没有影响<代码>宽度和高度属性是必需的
通过使用
```
flex
```
属性，可以将三个属性--
```
flex-grow
```
、
```
flex-shorn
```
和
```
flex-basis
```
巧妙地组合到一个声明中。使用
```
宽度
```
，相同的规则将需要多行代码

浏览器行为就呈现方式而言，

flex-basis

和

width

之间应该没有区别，除非

flex-basis

是

auto

或

content

根据规范：

flex: 0 0 100px;    /* don't grow, don't shrink, stay fixed at 100px */

对于除

auto

和

content

以外的所有值，

flex basis

的解析方式与水平写入模式下的

width

相同

但是

auto

或

content

的影响可能很小，或者根本没有影响。规范中的更多内容：

flex: 0 0 100px;    /* don't grow, don't shrink, stay fixed at 100px */

在弹性项上指定时，

auto

关键字检索值作为所使用的弹性基础的主尺寸属性的。如果该值为本身

auto

，则使用的值为

content

表示根据弹性项的内容自动调整大小

注意：此值在Flexible的初始版本中不存在框布局，因此一些旧的实现将不支持它。使用

auto

和

自动

的主要尺寸（

宽度

或

高度

）

因此，根据规范，

flex-basis

和

width

解析相同，除非

flex-basis

是

auto

或

content

。在这种情况下，

flex basis

可能会使用内容宽度（据推测，

width

属性也会使用内容宽度）

弹性收缩系数记住flex容器的初始设置很重要。其中一些设置包括：

```
弹性方向：行
```
-弹性项目将水平对齐
```
justify content:flex start
```
-flex项将堆叠在主轴上的行的开始处
```
对齐项目：拉伸
```
-弹性项目将扩展以覆盖容器的交叉尺寸
```
flex wrap:nowrap
```
-flex项目被强制保留在一行中
```
弹性收缩：1
```
-弹性项目允许收缩

注意最后一个设置

由于默认情况下允许弹性项目收缩（防止其溢出容器），因此可以覆盖指定的

弹性基准

宽度

高度

例如，

flex-basis:100px

或

width:100px

，加上

flex-shrink:1

，不一定是100px

要渲染指定的宽度并保持固定，需要禁用收缩：

div {
   width: 100px;
   flex-shrink: 0;
}

或

或者，按照规范的建议：

flex: 0 0 100px;    /* don't grow, don't shrink, stay fixed at 100px */

鼓励作者使用

flex

速记控制灵活性而不是直接用它的速记属性，如速记正确重置任何未指定的组件以适应

浏览器错误某些浏览器无法在嵌套的flex容器中调整flex项的大小

flex-basis

在嵌套flex容器中被忽略<代码>宽度有效。使用flex basis时，容器忽略其子容器的大小，即