Question

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

这会将容器放入堆叠视图中。

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

无需将有问题的两个元素放入另一个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>

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>

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>

Answer 3

尝试使用flex-wrap: wrap，它的属性在flexbox中启用多行

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

3 个答案: