Question

我使用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%
}

Answer 1

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

＆＃13;

.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;
  }
}

＆＃13;

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

＆＃13;

Answer 2

使用媒体查询在Flex容器上应用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/

Answer 3

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

还包括flex-wrap属性...

＆＃13;

.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;
  }
}

＆＃13;

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

＆＃13;

Answer 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;
}

CSS：如何确保弹性项目包裹到下一行 - 在第一个项目之后 - 在某个屏幕宽度？

4 个答案: