在 flexbox 列中并排设置两个 flex 项目

Question

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

这会将容器置于堆叠视图中。

假设我有 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>

原文由 Jason Is My Name 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我不认为这是可能的，一旦你给你的父母 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>

原文由 Aaron McGuire 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用 flexbox 的布局相当简单。你不需要 flex-direction: column 。

只需将 flex-direction: row 与 flex-wrap: wrap 一起使用。

然后让每个元素足够长以占据一整行。

在要共享一行的元素上减少 flex-basis 。

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

.column-item {
  flex: 1 0 61%;  /* flex-grow, flex-shrink, flex-basis */
  margin: 2px;
  background-color: lightgreen;
}

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

 <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>

使用 flex-grow: 1 在 flex 速记中定义，无需使用 calc() 。

由于 flex-grow 将占用行上的可用空间， flex-basis 只需要足够大以强制换行。在这种情况下，对于 flex-basis: 61% ，边距有足够的空间，但永远没有足够的空间容纳第二个项目。

---

使用 CSS Grid 有一个更简单、更有效的解决方案：

 .flex-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
}

.column-item:nth-of-type(-n + 3) {
  grid-column: span 2;
}

.column-item {
  background-color: lightgreen;
}

 <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>

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 4.0 许可协议