时间戳

首页 > 解决方案 > flex容器的CSS设置高度

css - flex容器的CSS设置高度

问题描述

我的 HTML 中有 3 个主要 div，带有 id（标题、口味和购买）。所有这 3 个 div 都是弹性容器。我正在尝试设置每个 div 的高度，但到目前为止我还无法做到。

这是我的 CSS 代码（高度值作为示例设置，它们不是我想要设置的实际值）：

#header {
  background-image: url("resources/skylight.jpg");
  background-position: center;
  height: 300px;
  display: flex;
  justify-content: center;
  font-size: 55px;
}

#flavors {
  height: 500px;
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

#purchase {
  height: 200px;
  margin: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

标签： cssflexbox

解决方案

我用你的 CSS 做了一个片段，我刚刚添加了一些背景颜色以方便可视化......

#header {
  background: red;
  background-position: center;
  height: 300px;
  display: flex;
  justify-content: center;
  font-size: 55px;
}

#flavors {
  background: aqua;
  height: 500px;
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

#purchase {
  background: lime;
  height: 200px;
  margin: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
<div id="header">
</div>

<div id="flavors">
</div>

<div id="purchase">
</div>

所有的高度都很好，你能给我们更多的信息吗？

推荐阅读