在 flex 容器中，将 child 1 放在顶部，将 2 和 3 堆叠在底部

Question

我正在使用 flexbox 使 parents 的高度相同（需要它们匹配）并且 flex-wrap 每隔 3.

换行

然后我有一个始终位于底部的按钮。

第一个 child 的高度始终不同，但宽度始终相同。

现在的诀窍是，我希望 child 2 位于按钮顶部的底部，并且都清除 child 1.

的内容

绝对定位不会清除child1.

的文字

我试过flex-grow，但它对我不起作用，可能是因为我是 flexbox 的新手。

请看fiddle:https://jsfiddle.net/mm783qc6/4/

.contain {
  display: flex;
  border: 1px solid #000;
  width: 100%;
  flex-wrap: wrap;
}
.p {
  width: 29.5%;
  float: left;
  position: relative;
  margin: 0 10px 30px;
  border: 1px solid red;
}
.bb {
  position: absolute;
  bottom: 0;
  border: 1px solid green;
}
.c1 {
  border: 1px solid blue;
}
.c2 {
  border: 1px solid orange;
}

<div class="contain">

  <div class="p">
    <div class="c1">
      <p>Random Height and text Random Height and text Random Height and text Random Height and text Random Height and text Random Height and text Random Height and text Random Height and text Random Height and text</p>
    </div>
    <div class="c2">
      <p>Go to bottom, but on top of bottom bumper - text can grow sdfkjlkfdj;lksjdf;</p>
    </div>
    <div class="bb">
      <p>---------------Button--------------</p>
    </div>
  </div>

  <div class="p">
    <div class="c1">
      <p>Random Height and text Random Height and text Random Height and text Random Height and text Random Height and text Random Height and text Random Height and text Random Height and text Random Height and textRandom Height and text Random Height and
        text Random Height and text Random Height and text Random Height and text Random Height and text Random Height and text Random Height and text Random Height and text</p>
    </div>
    <div class="c2">
      <p>Go to bottom, but on top of bottom bumper - text can grow sdfkjlkfdj;lksjdf;</p>
    </div>
    <div class="bb">
      <p>-------Button-------</p>
    </div>
  </div>

  <div class="p">
    <div class="c1">
      <p>Random Height and text Random Height and text Random Height and text Random Height and text Random Height and text Random Height and text Random Height and text Random Height and text Random Height and textRandom Height and text Random Height and
        text Random Height and text Random Height and text Random Height and text Random Height and</p>
    </div>
    <div class="c2">
      <p>Go to bottom, but on top of bottom bumper - text can grow sdfkjlkfdj;lksjdf;</p>
    </div>
    <div class="bb">
      <p>-------Button-------</p>
    </div>
  </div>


  <div class="p">
    <div class="c1">
      <p>Random Height and text Random Height</p>
    </div>
    <div class="c2">
      <p>Go to bottom, but on top of bottom bumper - text can grow sdfkjlkfdj;lksjdf;</p>
    </div>
    <div class="bb">
      <p>---------------Button--------------</p>
    </div>
  </div>

  <div class="p">
    <div class="c1">
      <p>Random Height and text Random Height</p>
    </div>
    <div class="c2">
      <p>Go to bottom, but on top of bottom bumper - text can grow sdfkjlkfdj;lksjdf;</p>
    </div>
    <div class="bb">
      <p>-------Button-------</p>
    </div>
  </div>

  <div class="p">
    <div class="c1">
      <p>Random Height and text Random Height</p>
    </div>
    <div class="c2">
      <p>Go to bottom, but on top of bottom bumper - text can grow sdfkjlkfdj;lksjdf;</p>
    </div>
    <div class="bb">
      <p>-------Button-------</p>
    </div>
  </div>
</div>

Answer 1

尝试使用 column-direction 将 class p 元素放入弹性容器中。然后使用 auto 边距将 children 2 和 3 推到底部。此方法可根据需要对齐项目，并防止重叠。

已修订 CSS

.contain {
    display: flex;
    border: 1px solid #000;
    width: 100%;
    flex-wrap: wrap;
}

.p {
    width: 29.5%;
    /* float: left;              <-- remove; not necessary */
    /* position: relative;       <-- remove; not necessary */
    margin: 0 10px 30px;
    border: 1px solid red;

    display: flex;               /* new */
    flex-direction: column;      /* new */
}

.bb {
    /* position: absolute;       <-- remove; not necessary */
    /* bottom: 0;                <-- remove; not necessary */
    border: 1px solid green;
}

.c1 {
    border: 1px solid blue;
    margin-bottom: auto;         /* new; push self to top, everything else to bottom */
    flex: 1;                     /* new; consume all available free space */
}

.c2 {
    border: 1px solid orange;
}

Revised Fiddle

在此处了解有关弹性 auto 边距的更多信息：

此外，如果您希望等高的列延伸到第一行之外——即，您希望第二行的项目与第一行的项目的高度相匹配——这对于 flexbox 是不可能的。我在这里解释一下原因：

在 flex 容器中，将 child 1 放在顶部，将 2 和 3 堆叠在底部

In flex container, position child 1 on top, and stack 2 and 3 at bottom

html

css

position

flexbox