Question

这可能是一个非常简单的答案，但这让我感到沮丧。我有一个Flex容器，其中并排有2个项目；有一个图像，而另一侧则是内容。在内容中，它既水平又垂直居中，但是内容彼此紧紧地堆叠在一起（标题，文本，按钮）。有没有办法让它们在卡的高度上均匀分布？

#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

使用列方向为文本考虑另一个flexbox容器，然后您可以根据需要轻松地将它们隔开：

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

Flexbox-卡中的内容要均匀分布

1 个答案: