Question

是否可以在中间调整一个flex-item并将其拉伸到100％的宽度，作为HTML在调整大小时的第二行？

我将以下flex-items包裹在flex-box中

项目-A项目-B项目-C项目-D项目-E

<div class="d-flex flex-wrap">
  <div>Item-A</div>
  <div>Item-B</div>
  <div>Item-C</div>
  <div>Item-D</div>
  <div>Item-E</Div>
</div>

在较小的设备上，我希望将Item-B从该行中拉出并显示为第二行，但在父容器中。可以使用CSS flex吗？

注意：我正在使用bootstrap作为CSS框架

Answer 1

使用flex-basis: 100%使您的商品变宽，并使用order: 1将其放置在容器中所有其他物品之后。在下面的代码段中，我将其设置为在小于500px的设备上发生：

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1;
  outline: 1px dashed tomato;
  text-align: center;
}

@media only screen and (max-width: 500px) {
  .item-b {
    flex-basis: 100%;
    order: 1;
  }
}

<div class="flex-container">
  <div class="item item-a">a</div>
  <div class="item item-b">b</div>
  <div class="item item-c">c</div>
  <div class="item item-d">d</div>
  <div class="item item-e">e</div>
</div>

Answer 2

您可以使用CALL和媒体查询来获得结果。

order

* {
    box-sizing: border-box;
}
.container {
  display: flex;
  flex-wrap: wrap;
}

.container > div {
  border: solid 1px black;
  width: 25%;
}

.item3 {
  order: 5;
  width: 100%;
  flex-shrink: 0;
  flex-grow: 1;
}

.item4 {
  order: 3;
}

.item5 {
  order: 4;
}
  
@media only screen and (min-width: 600px) {
  .container {
    flex-wrap: no-wrap;
  }
  
  .item3 {
    order: 3;
    flex-grow: 0;
  }
  
  .item4 {
    order: 4;
  }
  
  .item5 {
    order: 5;
  }
}

是否有可能在中间拉出一个flex-item并将其拉伸到100％的宽度，作为html上调整大小的第二行？

2 个答案: