html - 在 flexbox 列中并排设置两个 flex 元素

Question

我在 display: flex 容器中按列方向显示了一些元素。

这会将容器置于堆叠 View 中。

假设我有 5 个堆叠元素，我需要让其中两个显示内联或 flex 方向行。

无需将有问题的两个元素放入另一个 div，我可以将 flex direction row 应用于...

是否可以让这些元素并排放置？

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-column .column-item:nth-of-type(4),
.flex-column .column-item:nth-of-type(5) {
  width: calc(50% - 10px);
  display: inline-block;
  float: left;
}

.flex-column .column-item:nth-of-type(4) {
  margin-right: 20px;
}

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

Answer 1

我不认为一旦你给了你的 parent flex-direction:column; 属性就不可能，或者你可以启用 flex-wrap:wrap 和使用 flex-basis 属性控制元素的宽度。这允许您在不改变 html 结构的情况下实现您想要的效果。

.flex-column {
    display: flex;
    flex-wrap:wrap;
}

.flex-column .column-item {
 flex-basis:100%;}
.flex-column .column-item:nth-of-type(4),
.flex-column .column-item:nth-of-type(5) {
    flex-basis:50%;
   
    
}

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