如何将两个div放置在纵向排序的flex div的同一行中？

Question

这是我的代码片段：

.container {
  display: flex;
  flex-direction: column;
}
.container > div {
  padding: 20px;
  color: #fff;
  margin: 5px;
  text-align: center;
  font-size: 30px;
}
.fruits {
  order: 2;
  background: #ff5423;
}
.container :not(.fruits) {
  order: 1;
}
.flowers {
  background: #f970bd;
}
.trees {
  background: #049500;
}

<div class="container">
  <div class="fruits">The fruits</div>
  <div class="flowers">The flowers</div>
  <div class="fruits">The fruits</div>
  <div class="trees">The trees</div>
  <div class="fruits">The fruits</div>
</div>

我正在使用flex-direction: column;将所有.fruits div放在底部。还有两个其他的div.flowers和.trees可以随意放置在.conatiner内的任何位置，我无法处理它们。我希望它们占据其父元素宽度的一半，以便它们只占用一行。 我想要实现的目标: 在这里给50％的宽度不起作用。我知道规则说方向是列方式，但是我仍然希望如果有任何可用的方法/技巧来实现！使用与flex不同的技术的任何其他解决方法也将有所帮助。

- aniskhan001

Answer 1

你可以使用flex-direction: row来实现此操作，只需要在父元素上设置flex-wrap: wrap，并在想要占用一半宽度的元素上设置flex: 0 0 50%。

此外，你还需要使用* {box-sizing: border-box}来处理内边距，以及使用calc()来处理外边距。

* {
  box-sizing: border-box;
}
.container {
  display: flex;
  flex-wrap: wrap;
}
.container > div {
  padding: 20px;
  color: #fff;
  margin: 5px;
  flex: 0 0 calc(100% - 10px);
  text-align: center;
  font-size: 30px;
}
.fruits {
  order: 2;
  background: #ff5423;
}
.container div:not(.fruits) {
  order: 1;
  flex: 0 0 calc(50% - 10px);
}
.flowers {
  background: #f970bd;
}
.trees {
  background: #049500;
}

<div class="container">
  <div class="fruits">The fruits</div>
  <div class="flowers">The flowers</div>
  <div class="fruits">The fruits</div>
  <div class="trees">The trees</div>
  <div class="fruits">The fruits</div>
</div>

- Nenad Vracar

---

太棒了！你真厉害！ :) - aniskhan001