html - CSS flexbox：在具有不同内容量的卡片内垂直对齐操作按钮

Question

我有三张卡片需要垂直对齐操作按钮，但每张卡片内的内容量可能会有所不同，并且事先不知道。我不能只使用justify-content: space-between，因为内容放置在另一个可以具有框阴影、背景等的元素中。卡片使用 间隔padding，假设这是一个要求。基本上我需要扩展每个内容块下的可用空间，以便按钮垂直对齐。我在下面提供了一个示例：https ://jsfiddle.net/jz3ogk06/27/

标签： htmlcssflexbox

Answer 1

由于您没有提供任何 HTML，我在下面的代码段中添加了一些。您会注意到父元素将具有display: flex, 属性以及单个项目块。其次，我flex: 1 1 0%;在每个块内添加了文本，以允许它占用其父元素的剩余空间。

.container {
  width:1000px;
  background: #ebebeb;
  border:1px solid #d9d9d9;
  padding:10px;
  border-radius:5px;
  display:flex;
  justify-content: space-between;
}

.item {
  flex: 1;
  padding:5px;
  box-sizing:border-box;
  font-family: helvetica;
  line-height:20px;
  display:flex;
}

.item > div {
  display: flex;
  flex-direction: column;
  background:white;
}

.item p {
  display: flex;
  flex: 1 1 0%;
}

<div class="container">
  
  <div class="item">
    <div>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis mollis magna. Nam cursus tristique fermentum. Etiam volutpat nunc leo, ac tincidunt ipsum vehicula ut.           </p>
      <button> Button </button>
    </div>
  </div>
  
  <div class="item">
    <div>
      <p> Fusce congue vel nunc vitae eleifend. Duis eget elit a risus tempus vulputate. Suspendisse dignissim pretium lacus sit amet aliquam. Nunc tempor sodales ullamcorper. Aenean vel arcu in massa dignissim ullamcorper vitae eget nisl. Aliquam erat volutpat. </p>
      <button> Button </button>
    </div>
  </div>
  <div class="item">
    <div>
      <p> Donec egestas tristique ante, a dictum massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas tempus dui tellus, eu ornare tellus euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras nec pharetra mauris, sed condimentum nibh. Nullam scelerisque libero eu quam vulputate, tempor iaculis lorem pharetra. Maecenas in faucibus urna.</p>
      <button> Button </button>
    </div>
  </div>
</div>