html - 将 flex 元素放在 flex 盒容器中的另一个 flex 元素之下

Question

在这种情况下，我希望将 2.5 放置在 2 下方 - 但 flexbox 容器强制将其放置在同一行，而不是将其放置在 div 下方那已经是那个特定的顺序了。

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

我试图在 ie 中使用网格来完成此操作，但无法做到这一点，因为 ie 中不完全支持网格。这就是为什么我想看看我是否只能为 ie 执行此操作。

代码笔: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

我是这样理解你的要求的:

• 元素 2.5 必须在元素 2 的下方
• 不能用Grid，只能用flexbox
• 不能修改 HTML

这是一种解决方案:

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

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

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