Question

我要的是我正在从事的课堂作业，以某种方式，我把CSS弄坏了，甚至连我的老师也很沮丧。

body {
  font-family: Georgia, serif;
  background: url("graphics/Background.png");
  margin: 5%;
}

h1 {
  text-align: center;
  padding: 0px 0px 20px 0px;
}

.panel {
  border: 3px solid black;
  width: 500px;
  height: 500px;
  margin: 20px;
}

#container {
  display: flex;
  align-content: space-between;
  justify-content: center;
  background-color: red;
  flex-direction: column;
}

<h1>Sunday Funnies</h1>
<div id="container">
  <img class="panel" src="Graphics/placeholder.png">
  <img class="panel" src="Graphics/placeholder.png">
</div>
</div>

```

这是我的教授进行了一些小尝试以弄清楚正在发生什么之后的结果。

Answer 1

align-content定位到伸缩线，而不是伸缩项。

您需要使用align-items。

此外，align-content在单行flex容器（即flex-wrap: nowrap）中无效。

h1 {
  text-align: center;
}

#container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: red;
}

.panel {
  border: 3px solid black;
  width: 100px;
  height: 100px;
  margin: 20px;
}

<h1>Sunday Funnies</h1>
<div id="container">
  <img class="panel" src="http://i.imgur.com/60PVLis.png">
  <img class="panel" src="http://i.imgur.com/60PVLis.png">
</div>

以下是跨轴对齐的详细说明：

How does flex-wrap work with align-self, align-items and align-content?

根据flexbox规范：

§ 8.4. Packing Flex Lines: the align-content property

align-content属性将Flex容器的行对齐   当横轴上有多余空间时，伸缩容器   类似于justify-content将单个项目对齐   主轴。 请注意，此属性对单行伸缩没有影响   容器。

^{（重点是我的）}

Answer 2

您想要align-items，不 align-content
justify-content是指主轴，而align-items是指横轴。这意味着如果您打算水平放置项目居中，则可能需要align-items: center。

body {
  font-family: Georgia, serif;
  background: url("graphics/Background.png");
  margin: 5%;
}

h1 {
  text-align: center;
  padding: 0px 0px 20px 0px;
}

.panel {
  border: 3px solid black;
  width: 500px;
  height: 500px;
  margin: 20px;
}

#container {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: red;
  flex-direction: column;
}

<h1>Sunday Funnies</h1>
<div id="container">
  <img class="panel" src="Graphics/placeholder.png">
  <img class="panel" src="Graphics/placeholder.png">
</div>

为什么此元素不居中？

2 个答案: