为何设置display:flex的flex-item需显式设width:100%才不折叠？

代码示例 #

CSS

.container { 
  display: flex;
}

.component {
  display: flex;
  //width: 100%;
  height: 10px;
  background-color: red;
}

HTML

<div class="container">
  <div class="component"></div>
</div>

问题描述 #

未设置width: 100%时，.component会发生折叠，无法显示；设置width: 100%后则可正常显示。

疑问：display: flex默认宽度应为100%，为何需要再次显式设置width: 100%？

补充说明：已知.component作为flex-item，默认width为auto，即宽度会收缩至内容宽度，因它无内容所以宽度为0，但它本身设置了display: flex，默认宽度应为100%，所以不解为何必须显式设置width: 100%。

解答 #

你混淆了flex容器的默认宽度规则和flex项目的尺寸计算逻辑：

• 当元素设置display: flex时，它作为块级flex容器，确实默认会占满父元素的可用宽度（类似块级元素的width: auto行为）——但这个规则只适用于它作为普通块级元素的场景。
• 但在你的代码里，.component同时是.container（flex容器）的flex项目，此时它的尺寸会优先遵循flex布局的项目规则：
  • flex项目的默认flex属性是0 1 auto，其中flex-basis: auto意味着它的基准宽度由自身内容决定。
  • 因为.component内部没有任何内容，它的内容宽度为0，所以即使它自身是flex容器，作为flex项目时，它的宽度会被收缩到0，导致看不到背景。
• 你可以不用显式设置width: 100%，而是通过修改flex项目的flex属性来实现：
  给.component添加flex: 1，它会自动填充容器的可用宽度，效果和width: 100%一致，但更符合flex布局的设计逻辑：

  .component {
    display: flex;
    flex: 1;
    height: 10px;
    background-color: red;
  }
  

简言之：元素自身作为flex容器的宽度规则，不会覆盖它作为父容器flex项目时的尺寸计算逻辑，两者是独立的层级规则。

内容的提问来源于stack exchange，提问作者happy_story