如何在特定屏幕宽度下让Flex容器首元素单独占一行？

当然可以实现这个需求，而且不需要新增任何HTML元素，只用CSS媒体查询配合Flexbox的属性就能搞定，下面是具体的实现方案：

修改后的完整代码 #

HTML（无需改动）

<div class="cart-cb">
  <div>Continue Browsing</div>
  <button>Property For Sale</button>
  <button>Land For Sale</button>
  <button>Villa Rentals</button>
</div>

CSS（关键修改点已标注）

.cart-cb {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  flex-wrap: wrap; /* 核心：开启Flex换行，否则元素不会自动折行 */
  gap: 12px; /* 可选：给元素之间添加间距，优化视觉效果 */
}

/* 媒体查询：当屏幕宽度≤800px时触发 */
@media (max-width: 800px) {
  .cart-cb div:first-child {
    flex-basis: 100%; /* 让第一个元素占据整行宽度，迫使后续元素换行 */
    text-align: right; /* 保持文字靠右对齐，和原有布局风格一致 */
    margin-bottom: 8px; /* 可选：和下方按钮拉开距离，提升可读性 */
  }
}

关键逻辑说明 #

1. 开启flex-wrap：默认情况下Flex容器的flex-wrap属性是nowrap（不换行），所以必须先设置为wrap，这样当元素总宽度超过容器时才会自动换行。
2. 媒体查询控制第一个元素：在800px的断点处，给第一个子元素设置flex-basis: 100%，让它占满整行的宽度，后面的按钮就会自动被挤到下一行，同时因为容器的justify-content: flex-end，下一行的按钮依然会靠右排列，完全符合你想要的效果。
3. 可选优化：gap和margin-bottom是为了让布局更美观，你可以根据自己的设计需求调整数值或者去掉这些属性。

如果你担心div:first-child的选择器不够健壮（比如后续HTML结构可能变化），也可以给第一个元素添加一个类名（比如cb-title），然后用.cb-title作为选择器，效果是一样的，只是更具可读性。

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