如何在可变高度列中对齐底部内容（按钮）？

Question

＆＃13;

＆＃13;

.row {
  display: flex;
}

section {
  display: flex;
  flex: 1 1 0;
  background: #eee;
}

h1, h2, p {
  text-align: center;
}

button {
  margin: 10px auto;
  display: block;
}

＆＃13;

<div class="row">
  <section>
    <div>
      <h1>Title</h1>
      <h2>Subheading</h2>
      <p>This is some content. This is some content. This is some content.</p>
      <button>Button</button>
    </div>
  </section>
  <section>
    <div>
      <h1>Title</h1>
      <h2>Subheading</h2>
      <p>This is some longer content. This is some longer content. This is some longer content. This is some longer content. This is some longer content. This is some longer content. This is some longer content. This is some longer content.</p>
      <button>Button</button>
    </div>
  </section>
  <section>
    <div>
      <h1>Title</h1>
      <h2>Subheading</h2>
      <p>This is more content. This is more content.</p>
      <button>Button</button>
    </div>
  </section>
</div>

＆＃13;

＆＃13;

＆＃13;

以上代码段使用flexbox作为相等高度的列。每列的按钮如何与底部对齐？这是否可以使用flexbox，或者我们是否必须使用position: relative＆amp; position: absolute？

Answer 1

您可以在<p>上嵌入flexbox并使用flex来让它们使用整个空间： 示例

.row {
  display: flex;
}
section {
  display: flex;
  flex: 1 1 0;
  background: #eee;
}
h1,
h2,
p {
  text-align: center;
}
section div {
  display: flex;
  flex-flow: column;
}
section div p {
  flex: 1
}
button {
  margin: 10px auto;
  display: block;
}

<div class="row">
  <section>
    <div>
      <h1>Title</h1>
      <h2>Subheading</h2>
      <p>This is some content. This is some content. This is some content.</p>
      <button>Button</button>
    </div>
  </section>
  <section>
    <div>
      <h1>Title</h1>
      <h2>Subheading</h2>
      <p>This is some longer content. This is some longer content. This is some longer content. This is some longer content. This is some longer content. This is some longer content. This is some longer content. This is some longer content.</p>
      <button>Button</button>
    </div>
  </section>
  <section>
    <div>
      <h1>Title</h1>
      <h2>Subheading</h2>
      <p>This is more content. This is more content.</p>
      <button>Button</button>
    </div>
  </section>
</div>

或（再次弯曲）将余量重置为按钮而不是<p>

上的弹性值

.row {
  display: flex;
}
section {
  display: flex;
  flex: 1 1 0;
  background: #eee;
}
h1,
h2,
p {
  text-align: center;
}
section div {
  display: flex;
  flex-flow: column;
}
button {
  margin: auto auto 10px;
  display: block;
}

<div class="row">
  <section>
    <div>
      <h1>Title</h1>
      <h2>Subheading</h2>
      <p>This is some content. This is some content. This is some content.</p>
      <button>Button</button>
    </div>
  </section>
  <section>
    <div>
      <h1>Title</h1>
      <h2>Subheading</h2>
      <p>This is some longer content. This is some longer content. This is some longer content. This is some longer content. This is some longer content. This is some longer content. This is some longer content. This is some longer content.</p>
      <button>Button</button>
    </div>
  </section>
  <section>
    <div>
      <h1>Title</h1>
      <h2>Subheading</h2>
      <p>This is more content. This is more content.</p>
      <button>Button</button>
    </div>
  </section>
</div>

Answer 2

您可以使用position: absolute

来实现此目的

.row {
  display: flex;
}

section {
  display: flex;
  flex: 1 1 0;
  background: #eee;
  position:relative;
  padding-bottom:20px;
}

h1, h2, p {
  text-align: center;
}

button {
   bottom: 0;
   display: block;
   left: 50%;
   margin: 10px auto;
   position: absolute;
  transform: translateX(-50%);
}

<div class="row">
  <section>
    <div>
      <h1>Title</h1>
      <h2>Subheading</h2>
      <p>This is some content. This is some content. This is some content.</p>
      <button>Button</button> 
    </div>
  </section>
  <section>
    <div>
      <h1>Title</h1>
      <h2>Subheading</h2>
      <p>This is some longer content. This is some longer content. This is some longer content. This is some longer content. This is some longer content. This is some longer content. This is some longer content. This is some longer content.</p>
      <button>Button</button>
    </div>
  </section>
  <section>
    <div>
      <h1>Title</h1>
      <h2>Subheading</h2>
      <p>This is more content. This is more content.</p>
      <button>Button</button>
    </div>
  </section>
</div>