如何为Flex子元素设50%宽度，在35rem时停止收缩并换行

要达成你要的效果，核心是利用Flex布局的flex属性组合，配合min-width限制最小宽度，具体实现如下：

父容器样式 #

先给父容器设置基础Flex布局属性：

.parent {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem; /* 可选：子元素间的间距，按需调整 */
}

子元素样式 #

子元素的关键属性组合是flex: 1 1 50%加上min-width: 35rem：

.child {
  flex: 1 1 50%; /* 等价于 flex-grow:1, flex-shrink:1, flex-basis:50% */
  min-width: 35rem;
  /* 以下是示例占位样式，替换成你自己的内容样式即可 */
  height: 200px;
  background-color: #eee;
  border: 1px solid #ccc;
}

效果说明 #

• 大屏状态：父容器宽度足够时，flex-basis: 50%让每个子元素默认占父容器的50%宽度，flex-grow:1确保如果父容器宽度不是刚好两倍子元素宽度，子元素会平分剩余空间填满。
• 收缩触发：当父容器宽度缩小，子元素会随之收缩，直到宽度达到min-width: 35rem时停止收缩。
• 自动换行：当父容器宽度不足以容纳两个35rem的子元素时，flex-wrap: wrap会触发换行，子元素自动变成单列排列。

完整代码示例 #

<div class='parent'>
    <div class='child'></div>
    <div class='child'></div>
</div>

<style>
.parent {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
}

.child {
  flex: 1 1 50%;
  min-width: 35rem;
  height: 200px;
  background-color: #eee;
  border: 1px solid #ccc;
}
</style>

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