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

Question

我有一些元素，它们在一个 display: flex 容器内以列方向显示。

这将使容器以堆叠视图显示。

假设我有 5 个堆叠的元素，我需要其中两个显示为行内或弹性方向。

没有将两个元素放入另一个 div 中，我可以将其应用于弹性方向行...

是否可能让这些元素并排坐着？

.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

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

---

好的答案，这是我已经实现到我的解决方案中的。请给我的问题点赞，这样我就有声望可以投票了。@Aaron McGuire - Jason Is My Name

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

Answer 3

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

}

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

- vatsal Doshi

---

不提供描述，错误答案 <3 - Jason Is My Name