Html 了解flex成长

我有3个div，如果我给了前两个div

flex:0.5

，如果我给了

flex-wrap:wrap

，最后一个div应该移到下一行。如果我错了，请改正

以下是我的html/css：

.parent{
显示器：flex；
高度：100px；
背景色：红色；
柔性包装：包装；
}
.child-1{
背景颜色：绿色；
弹性系数：0.5；
}
.child-2{
背景颜色：黄色；
弹性系数：0.5；
}
.儿童-3{
背景颜色：粉红色；
}

LOREN IPSUM LOREN IPSUM
LOREN IPSUMLOREN IPSUMLOREN IPSUMLOREN IPSUM
LOREN IPSUM LOREN IPSUM

flex grow属性设计用于在flex项目之间分配容器中的可用空间

它不适用于直接或精确地调整flex项目的大小

从：

flex-grow

。。。确定flex项相对增长的量 到flex容器中的其他flex项目（当正极空闲时） 空间是分布的

因此，

flex-grow

不会强制项目包装。以下是您使用flex grow:1000的示例：

要定义弹性项目的长度，请使用

宽度

、

高度

或

弹性基准

---

解释

flex-grow:0.5

应用

flex:0.5

时，您使用的是

flex

速记属性：

• flex-grow:0.5

• flex-shrink:1

• flex-basis:0

---

flex-grow

组件表示一个比例。在本例中，它告诉flex项消耗容器中相对于其同级的

flex grow

因子的一半可用空间

因此，例如，如果容器的宽度为

width:600px

，并且三个div的总宽度为450px，那么将在可用空间中留下150px（）

如果每个项目都有

flex-grow:1

，那么每个项目将消耗50px的额外空间，并且每个项目将计算到

宽度：200px

（）

但在您的代码中，有两个项目具有

flex-grow:0.5

，最后一个项目具有

flex-grow:0

，因此它的分解方式如下：

• 分区1将获得75px（可用空间的一半）
• 分区2将获得75px（可用空间的一半）
• div#3将得到0（因为它的

  flex-grow

  为0）

这些是现在的计算值：

• div#1=

  宽度：225px

• div#2=

  宽度：225px

• div#3=

  宽度：150px

.parent{
显示器：flex；
柔性包装：包装；
高度：100px；
背景色：红色；
宽度：600px；
}
.parent>div{
弹性基准：150px；
}
.child-1{
弹性系数：0.5；
背景颜色：绿色；
}
.child-2{
弹性系数：0.5；
背景颜色：黄色；
}
.儿童-3{
背景颜色：粉红色；
}

LOREN IPSUM LOREN IPSUM
LOREN IPSUMLOREN IPSUMLOREN IPSUMLOREN IPSUM
LOREN IPSUM LOREN IPSUM

您似乎想要

flex:50%

，这与

flex:0.5

不同。