Css 在Flexbox布局中，浏览器如何处理flex项的宽度？

我正在研究基于FlexBox的CSS3布局

我通常使用FlexBox的部分功能来布局一些导航

我的问题是当属性

flex

应用于子元素时，浏览器如何处理元素的宽度

请注意：

现在这是令人困惑的部分

当我为

#child2

使用

flex-basis:300px

而不是使用

width:300px

时，同样的情况也会发生

这就是它的方式吗？

flex wrap的

属性

flex wrap
属性控制flex容器是否为
或者，和方向，哪个
确定新线的堆叠方向

可以看出，
flex wrap
属性的初始值是
nowrap
，其中：

nowrap

flex容器为。交叉起始方向为
等效于的内联开始或块开始方向
当前写入模式，以横轴中的为准，以及
交叉结束方向与交叉开始方向相反

也就是说，默认情况下将被放置在一行中，无论其
宽度是多少；“即使这会导致内容溢出。”

因此，使用的值应为
wrap
，以创建一个“跨多行断开其弹性项目”的弹性容器


浏览器如何处理弹性项的宽度
默认情况下，弹性项具有以下特性：


属于
0
属于
1
自动

这意味着：


它们不会在flex容器中生长
它们会均匀收缩
它们的大小将根据其内容而定



因此，如果将
宽度
1-值高于flex容器中的可用空间-赋予flex项，它们将均匀收缩



如果将
2
的
flex-shrink
给较大的一个，例如
#child2
，它将比另一个收缩两倍，例如
#child1




flex
属性的效果
是
弹性增长
，
弹性收缩
，
弹性基础
属性的缩写；它接受3个值，其中第二个和第三个值是可选的

语法

none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]

none |[？| |]

flex
的默认值是
01 auto
。但是，如果使用单值语法-即
flex:1-计算值应为
flex:10%

为了理解
auto
的
flex basis
和
0
之间的区别，请查看以下图片，该图片取自：


图6。显示“绝对”弹性（从零开始）和“相对”弹性（从零开始）之间差异的图表
项目内容大小的基础）。这三个项目都有弹性因素
分别为1、1和2

通过将
flex:1
2给予
#child2
，由于
flex-basis:0
它将不再考虑flex项内容的宽度。因此，
#child2
的计算宽度将等于flex容器中的可用空间



此外，通过将
flex:1
2赋予
#child
项（以及
#child2
），flex项被强制均匀增长，无论它们是否具有明确的
宽度
；无论它们的
宽度
值是3多少




最后不能不提
为了拥有一个多行flex容器，除了容器上有
flex-wrap:wrap
外，如果您给flex项目提供了
flex-grow:1
（即
flex:1；
），您还必须提供
flex-basis:100%
）




一,。等于
flex-basis
而不指定
flex-grow


2.等于
flex-grow:1，
弹性收缩：1和
弹性基础：0
而
弹性收缩：1。

3.而
flex basis
会影响计算的宽度

none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]