Question

我使用flexbox来使父母的高度相同（需要它们匹配）和flex-wrap来包装每3个。

然后我有一个总是位于底部的按钮。

第一个孩子的身高总是不同，但宽度总是一样。

现在的诀窍是，我希望孩子2位于按钮顶部的底部，同时清除孩子1的内容。

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

我尝试了flex-grow，但它对我没用，可能是因为我不熟悉flexbox。

请看小提琴：https://jsfiddle.net/mm783qc6/4/

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

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

1 个答案: