证明内容 CSS 属性不适用于类

Question

我正在学习前端 Web 开发并设计自己的作品集。我偶然发现了一个关于 justify-content 和 align-item CSS 属性的问题。它们似乎不适用于我的类.

Protfolio Demo with current CSS & HTML

相关代码如下：

* {
  box-sizing: border-box;
  margin: 0%;
  padding: 0%;
}

body {
  font-family: roboto;
  background-repeat: space;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

nav {
  display: flex;
  height: 20vh;
}

.space1 {
  justify-content: center;
  align-items: center;
  display: flex;
  width: 50%;
  background-color: lawngreen;
}

.nav-logo {
  display: flex;
  background-color: red;
  width: 50%;
  height: 100%;
}

.empty-space1 {
  display: flex;
  width: 50%;
  background-color: tomato;
  height: 100%;
}

.space2 {
  display: flex;
  width: 50%;
  background-color: lightyellow;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.empty-space2 {
  display: flex;
  width: 50%;
  background-color: yellow;
  height: 100%;
}

.nav-links {
  display: flex;
  width: 50%;
  background-color: tomato;
  height: 100%;
}

.nav-links ul {
  display: inline-flex;
  list-style: none;
  height: 100%;
}

.nav-links ul li a {
  justify-content: space-evenly;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<nav>
  <div class="space1">
    <div class="nav-logo">Logo</div>
    <div class="empty-space1">lorem
      <!--empty space-->
    </div>
  </div>
  <div class="space2">
    <div class="empty-space2">lorem
      <!--empty space-->
    </div>
    <div class="nav-links">lorem
      <ul>
        <li><a href="">About Me</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">Blog</a></li>
        <li><a href="">Projects</a></li>
        <li><a href="">Tools</a></li>
      </ul>
    </div>
  </div>
</nav>

你能告诉我为什么这不起作用吗？我该如何解决这个问题？

谢谢 :)

Answer 1

为了使用 align-items 和 justify-content 对齐中心，您需要将其应用到 您的内容的直接容器。

此外，您的 ul 元素有一个 height: 100%，即使它前面有更多文本。所以我删除了它，这样它就不会溢出容器。

/* ADDITION */

.centered-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}


/* END */

* {
  box-sizing: border-box;
  margin: 0%;
  padding: 0%;
}

body {
  font-family: roboto;
  background-repeat: space;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

nav {
  display: flex;
  height: 150px;
}

.space1 {
  justify-content: center;
  align-items: center;
  display: flex;
  width: 50%;
  background-color: lawngreen;
}

.nav-logo {
  display: flex;
  background-color: red;
  width: 50%;
  height: 100%;
}

.empty-space1 {
  display: flex;
  width: 50%;
  background-color: tomato;
  height: 100%;
}

.space2 {
  display: flex;
  width: 50%;
  background-color: lightyellow;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.empty-space2 {
  display: flex;
  width: 50%;
  background-color: yellow;
  height: 100%;
}

.nav-links {
  display: flex;
  width: 50%;
  background-color: tomato;
  height: 100%;
}

.nav-links ul {
  display: inline-flex;
  list-style: none;
  /* REMOVED! */
  /* height: 100%; */
  justify-content: space-evenly;
}

.nav-links ul a {
  margin: 0 .1em;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<nav>
  <div class="space1">
    <div class="centered-content nav-logo">Logo</div>
    <div class="centered-content empty-space1">lorem
      <!--empty space-->
    </div>
  </div>
  <div class="space2">
    <div class="centered-content empty-space2">lorem
      <!--empty space-->
    </div>
    <div class="centered-content nav-links">lorem
      <ul class="centered-content">
        <li><a href="">About Me</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">Blog</a></li>
        <li><a href="">Projects</a></li>
        <li><a href="">Tools</a></li>
      </ul>
    </div>
  </div>
</nav>

请注意，我将 justify-content: space-evenly; 从 .nav-links ul li a 移到了 .nav-links ul li，这是我们的 内容的容器 。所以我们要将其内容均匀地证明为space。

为了安全起见（确保它们即使在小屏幕上也不会接触），您也可以在每个元素之间添加边距以将它们分开：

.nav-links ul a {
  margin: 0 .1em;
}

证明内容 CSS 属性不适用于类

Justify Content CSS property isn't working on classes

html

css

frontend

nav

证明内容 CSS 属性 不适用于 类

Justify Content CSS property isn't working on classes

html

css

frontend

nav

证明内容 CSS 属性不适用于类