代码之家 › 专栏 › 技术社区 › n1234

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

flexbox css3 css

n1234 · 技术社区 · 7 年前

这也许是一个很简单的答案,但我很沮丧。我有一个并排有两个项目的flex容器;其中一个是图像,另一个是内容。在内容中,它在水平和垂直方向居中,但内容堆叠得非常紧密(标题、文本、按钮)。有没有办法让它们均匀地分布在卡片的高度上?

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

1 回复 | 直到 7 年前

Temani Afif 7 年前

考虑使用列方向为文本设置另一个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>

推荐文章

Luca Phillips · 当表是div flex的子级时,它有巨大的空间

3 年前

Nishit Agrawal · Flexbox-将第三项与第二项对齐

3 年前

alan · 有没有办法向flexbox图像添加链接?

3 年前

Gary · CSS在弹性方框布局中用句点字符串填充段落剩余部分的方法?

3 年前

n1234 · Flexbox-图像和内容

7 年前

nCardot · 为什么是!h1元素媒体查询工作所需的重要信息?[副本]

7 年前

Adam Olsson · 在中心CSS中对齐单个列表项

7 年前

London804 · 我是否可以使设置为对齐内容的元素:换行时间距向右对齐?

7 年前

user3137124 · 当“flex direction”为“column”时,如何将div与顶部对齐?[副本]

7 年前

AJ- · 无法垂直对齐文本-angularJS+bootstrap+flexbox

7 年前