html - 在 flex 容器中，将子级 1 放置在顶部，将 2 和 3 堆叠在底部

Question

我使用 flexbox 使父级的高度相同(需要它们匹配)，并使用 flex-wrap 来包裹每 3 个。

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

第一个子元素的高度始终不同，但宽度始终相同。

现在的技巧是，我希望子级 2 位于按钮顶部的底部，并且都清除子级 1 的内容。

绝对定位不会清除子级 1 的文本。

我尝试了 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

尝试将类 p 元素放入具有列方向的 Flex 容器中。然后使用 auto 边距将子级 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

在此处了解有关 Flex auto 边距的更多信息:Methods for Aligning Flex Items along the Main Axis

此外，如果您希望等高的列延伸到第一行之外 - 即您希望第二行上的元素与第一行上的元素高度匹配 - 这对于 Flexbox 来说是不可能的。我在这里解释一下原因:Equal height rows in a flex container