CSS：如何确保 flex 项目在某个屏幕宽度处换行到下一行——在第一个项目之后？ [复制]答案

【问题标题】：CSS: How can I ensure flex items wrap to the next line--after the first item--at a certain screen width? [duplicate]CSS：如何确保 flex 项目在某个屏幕宽度处换行到下一行——在第一个项目之后？ [复制]
【发布时间】：2018-06-24 23:55:28
【问题描述】：

我使用 CSS flexbox (codepen here) 在一行上显示了四个 HTML 元素。在一定的屏幕宽度（例如 800 像素）下，我想确保第一个元素显示在一行上，而其余三个元素换行到下一行（如 this screenshot）。我可以通过 CSS 媒体查询和/或额外的 HTML 来实现吗？如果是这样，这样做的正确方法是什么？我现有的代码如下：

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%
}

【问题讨论】：

标签： css flexbox

【解决方案1】：

使用媒体查询在弹性容器上应用flex-wrap:wrap，在第一个子容器上应用flex:0 0 100%。

这样您就不需要额外的 HTML 标记，也不需要更改代码上的任何内容，只需要媒体查询。

@media (max-width: 800px) {
  .cart-cb{
    flex-wrap:wrap;
  }
  .cart-cb div{
    flex: 0 0 100%;
    text-align:right;
  }
}

https://jsfiddle.net/378b4yLy/

【讨论】：

这行得通，我理解，它需要的额外代码最少。除非有任何不可预见的问题，否则我会认为它是答案。谢谢。

【解决方案2】：

您可以将按钮包装在一个容器中 - 这样可以在换行时将它们组合在一起。

还包括flex-wrap 属性...

.cart-cb {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  width: 100%;
}

/* at 800px screen width force wrap */

@media (max-width: 800px) {
  .buttons {
    width: 100%;
    text-align: right;
  }
}

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

【讨论】：

【解决方案3】：

您可以使用flex-basis: 100% 更改其初始宽度，以便在中断发生时占据整行：

.cart-cb {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap; /* enables wrapping */
  /*width: 100%; by default*/
}

@media screen and (max-width: 800px) {
  .cart-cb > div:first-child {
    flex-basis: 100%;
    text-align: right;
  }
}

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

【讨论】：

【解决方案4】：

试试这个代码 查看演示 https://jsfiddle.net/JentiDabhi/s48r3ere/

HTML

<div class="cart-cb">
  <div class="label-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: auto;
    flex-wrap: wrap;
    float: right;
}
div.label-div {
    display: block;
    flex: 100%;
}
.cart-cb button{
  flex: auto;
}

【讨论】：