flex容器无法占满父容器宽度及item宽度计算问题咨询

代码示例 #

CSS代码

.outside {
  /*  Note line3, the top and bottom will be the same, why add the flex on the different */
  display: flex;
}

.content {
  background: skyblue;
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 20%;
}

HTML代码

<div class="outside">
  <div class="content">
    <div class="item">apple</div>
    <div class="item">apple</div>
    <div class="item">apple</div>
    <div class="item">apple</div>
    <div class="item">banana</div>
    <div class="item">banana</div>
    <div class="item">banana</div>
  </div>
</div>

========

<div class="content">
  <div class="item">apple</div>
  <div class="item">apple</div>
  <div class="item">apple</div>
  <div class="item">apple</div>
  <div class="item">banana</div>
  <div class="item">banana</div>
  <div class="item">banana</div>
</div>

问题解答 #

1. 带有outside类的元素为何无法像content类元素一样占满屏幕宽度？
   其实不是.outside没占满屏幕，而是它的子元素.content没占满。.outside是flex容器，它的直接子项.content默认flex-grow: 0——flex子项默认不会主动扩展去填充容器的剩余空间，只会根据自身内容的宽度适配。而单独的.content是块级flex容器（display: flex默认属于块级元素），块级元素本身就会自动占满父容器的可用宽度，所以两者呈现效果不同。如果想让.outside里的.content也占满宽度，给.content加一行flex-grow: 1即可。

2. 想了解.item设置的width:20%是基于什么基准计算的？
   .item的width:20%是基于它的直接父元素.content的宽度来计算的。因为.content是flex容器，.item作为它的flex子项，这里的百分比宽度会以父容器的可用宽度为基准，所以每个.item默认会占.content宽度的20%，5个刚好能排满一行。

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