Question

在这种情况下，我希望将2.5放置在2下方-但是flexbox容器会强制将其放置在同一行中，而不是将其放置在该特定位置的div下订单。

我如何使用flexbox-将包含2.5的div放在包含2的div下-给出此html 。

我试图通过使用网格来完成此操作，但由于无法在ie中完全支持网格，因此无法做到这一点。这就是为什么我试图看看是否只能针对网格来做到这一点。

>

Codepen：https://codepen.io/anon/pen/ewqmXw

.flex-container {
    display: flex;
}

.item-1 {
    order:1;
    background-color: rgba(200,520,266,.75);
    border-color: #b4b4b4;
    width: 50px;
}

.item-2 {
    order:2;
    background-color: rgba(145,223,0,.75);
    border-color: transparent;
    width: 50px;
}

.item-3 {
    order:3;
    background-color: rgba(145,520,0,.75);
    width: 50px;
}

.item-4 {
    order:4;
    background-color: rgba(0,0,0,.25);
    border-color: transparent;
    width: 50px;

}

.item2half {
    order:2;
    background-color: rgb(20,100,255);
    border-color: transparent;
    width: 50px;
}

<div class="flex-container">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item2half">2.5</div>
  <div class="item-3">3</div>
  <div class="item-4">4</div>
</div>

Answer 1

我在item2half div中添加了item-2

.flex-container {
    display: flex;
}

.item-1 {
    order:1;
    background-color: rgba(200,520,266,.75);
    border-color: #b4b4b4;
    width: 50px;
}

.item-2 {
    order:2;
    background-color: rgba(145,223,0,.75);
    border-color: transparent;
    width: 50px;
}

.item-3 {
    order:3;
    background-color: rgba(145,520,0,.75);
    width: 50px;
}

.item-4 {
    order:4;
    background-color: rgba(0,0,0,.25);
    border-color: transparent;
    width: 50px;

}

.item2half {
    order:2;
    background-color: rgb(20,100,255);
    border-color: transparent;
    width: 50px;
}

<div class="flex-container">
  <div class="item-1">1</div>
  <div class="item-2">2
    <div class="item2half">2.5</div>
  </div>
  <div class="item-3">3</div>
  <div class="item-4">4</div>
</div>

Answer 2

这就是我对您的要求的理解：

项目2.5必须在项目2下方
不能使用网格，只能使用弹性框
无法更改HTML

这是一种解决方案：

您的弹性商品的长度为50px。
每行需要4个。
因此，不要以像素为单位定义项目宽度，而是将容器设置为width: 200px，将项目设置为{{1}的width: 25%）
现在您可以包装物品了。将容器设置为flex-basis: 25%。
创建一个伪元素作为第六项。
该项目将是透明的，并占据项目1下的空间。
使用wrap属性确保项目2.5位于最后位置。

order

.flex-container {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
}

.item-1 {
  flex: 0 0 25%;
  order: 1;
  background-color: rgba(200, 520, 266, 0.75);
}

.item-2 {
  flex: 0 0 25%;
  order: 2;
  background-color: rgba(145, 223, 0, 0.75);
}

.item-3 {
  flex: 0 0 25%;
  order: 3;
  background-color: rgba(145, 520, 0, 0.75);
}

.item-4 {
  flex: 0 0 25%;
  order: 4;
  background-color: rgba(0, 0, 0, 0.25);
}

.flex-container::after {
  flex: 0 0 25%;
  order: 5;
  background-color: transparent;
  content: "";
}

.item2half {
  flex: 0 0 25%;
  order: 6;
  background-color: aqua;
}

将伸缩项目放置在伸缩框容器中的另一个伸缩项目下

2 个答案: