Flexbox -卡片中的内容要间隔均匀

Question

这可能是一个非常简单的答案，但这让我很沮丧。我有一个灵活的容器与两个项目并排；有一个图像，另一边的内容。在内容中，它是水平和垂直的居中，但内容是非常紧密地堆叠在一起(标题，文本，按钮)。有没有办法让它们均匀地间隔在卡片的高度上？

​

#container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#container-image>img {
  display: block;
  width: 100%;
}

#container-image {
  flex: 1;
}

#container-content {
  flex: 2;
  align-self: center;
  text-align: center;
}

.button {
  background-color: blue;
  color: white;
  padding: 6px 30px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  border: 1px solid #34495e;
}

HTML:

<section id="container">
  <div id="container-image">
    <img src="https://www.placecage.com/c/1500/2000" alt="" />
  </div>

  <div id="container-content">
    <h3>title</h3>
    <p>some text about this card</p>
    <a class="button">more...</a>
  </div>
</section>

​

Answer 1

考虑使用列方向为文本的另一个柔性盒容器，然后您可以很容易地按照您的需要对它们进行空间空间：

​

#container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#container-image>img {
  display: block;
  width: 100%;
}

#container-image {
  flex: 1;
}

#container-content {
  flex: 2;
  text-align: center;
  display:inline-flex;
  flex-direction:column;
  justify-content:space-evenly; /*you can also use space-between OR space-around*/
}

.button {
  background-color: blue;
  color: white;
  padding: 6px 30px;
  text-align: center;
  display: inline-block;
  align-self:center;
  font-size: 16px;
  border: 1px solid #34495e;
}

<section id="container">
  <div id="container-image">
    <img src="https://www.placecage.com/c/1500/2000" alt="" />
  </div>

  <div id="container-content">
    <h3>title</h3>
    <p>some text about this card</p>
    <a class="button">more...</a>
  </div>
</section>

​