Question

我的HTML中有3个主要的div，带有ID（标题，风味和购买）。所有这3个div都是flex容器。我正在尝试设置每个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;
}

Answer 1

我已经用您的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>

所有高度都能正常工作，您能给我们更多信息吗？

Flex容器的CSS设置高度

1 个答案: