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

问题描述

我正在学习前端 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>

请告诉我为什么这不起作用,我该如何解决这个问题?

谢谢 :)

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)