Flex布局子元素设width:50% 实际仅占25%宽度问题

使用CSS Flex布局开发时，给Flex容器下的列元素设置width: 50%样式，但列元素并未按预期占据容器50%的宽度，实际仅占25%，复现代码如下：

/* CSS 代码 */
.footer-cols {
  display: flex;
}

.footer-col {
  width: 50%;
}

<!-- HTML 代码 -->
<div class="footer">
  <div class="footer-cols">
    <div class="footer-col">
      <ul>
        <li>Item 1</li>
      </ul>
    </div>
    <div class="footer-col">
      <ul>
        <li>Item 1</li>
      </ul>
    </div>
    <div class="footer-col">
      <ul>
        <li>Item 1</li>
      </ul>
    </div>
    <div class="footer-col">
      <ul>
        <li>Item 1</li>
      </ul>
    </div>
  </div>
</div>

这个表现是Flex布局的默认规则导致的，不是样式异常：

• Flex容器的直接子元素（即flex项目）默认带有flex-shrink: 1属性：当所有flex项目的宽度总和超过容器可用宽度时，项目会按照比例自动收缩，避免内容溢出容器。
• 上述代码中一共放置了4个设置width: 50%的列，所有列的宽度总和为容器宽度的200%，超出容器宽度1倍。此时每个列会被等比例收缩50%，最终实际渲染宽度为50% * 0.5 = 25%，和实际观测到的表现完全吻合。

根据实际布局需求选择对应方案即可：

• 若需求是两列布局，每行展示2个占50%宽度的列：给Flex容器添加flex-wrap: wrap属性，允许flex项目换行，超出容器宽度的项目会自动排列到下一行，不会触发收缩。
  修正后CSS代码：

  .footer-cols {
    display: flex;
    flex-wrap: wrap;
  }
  
  .footer-col {
    width: 50%;
  }
  

• 若需求是4个列在同一行排列：原本设置的width: 50%和需求不匹配，将列宽修改为width: 25%即可，此时所有列总宽度刚好等于容器宽度，不会触发收缩，每个列自然占据1/4容器宽度。
• 若需求是4个50%宽度的列强制在同一行排列，不允许收缩：给列元素添加flex-shrink: 0属性，关闭自动收缩规则，此时容器会出现横向滚动条承载超出的宽度。
  对应CSS代码：

  .footer-col {
    width: 50%;
    flex-shrink: 0;
  }
  

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