如何设置每行2个Flex项且每行最后一项占满宽度？

要实现每行显示2个Flex项目，且每行第二个项目自动扩展宽度、文本不换行，你需要调整Flex项目的flex属性配置，具体修改如下：

核心思路 #

• 父容器保留display:flex和flex-wrap:wrap，允许项目换行
• 每行第一个项目设置flex-shrink:0，避免文本被压缩，维持自身宽度
• 每行第二个项目设置flex:1，自动占据当前行剩余宽度
• 保留white-space:nowrap确保文本不换行

修正后的代码 #

CSS代码

div{
  display:flex;
  flex-wrap:wrap;
}
div span{
  background:red;
  margin:2px;
  white-space:nowrap;
}
/* 每行第一个项目，禁止压缩 */
div span:nth-child(odd){
  flex-shrink:0;
}
/* 每行第二个项目，自动扩展剩余宽度 */
div span:nth-child(even){
  flex:1;
  background:yellow;
}

HTML代码

<div>
  <span>aaa</span>
  <span>bbbbbb</span>
  <span>ccccccccc</span>
  <span>ddd</span>
  <span>eee</span>
  <span>fff</span>
</div>

原方法无效原因 #

你之前给偶数项设置flex-basis:100%会让每个偶数项单独占一行，不符合“每行2个项目”的需求；margin-right:auto在这种需要自动填充剩余宽度的场景下，不如flex:1直接有效——flex:1会同时设置flex-grow:1、flex-shrink:1和flex-basis:0%，确保项目能自动扩展填充剩余空间。

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