Question

我有一个侧导航栏。我希望这些项目均匀分布，以便填满整个“条形图”。

我试过让我的'容器'有justify-content: space-between。但是，它没有采用flex属性。

我会发布我的代码，因为它会显示我的意思。

我也希望它保持'固定'但这样做会将'容器'切成约50％的高度。

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  font-family: "Dosis", sans-serif;
}

body {
  display: flex;
  min-height: 100vh;
  flex-flow: row wrap;
  margin: auto;
  background-color: black;
}

.side-menu {
  background-color: lightcoral;
  font-size: 2em;
  text-transform: uppercase;
  justify-content: space-between;
}

.side-menu ol {
  list-style-type: none;
  max-width: 100%;
  padding: 0px 30px;
}

.side-menu li {
  line-height: 5em;
}

#projects {}

.top-header {
  background-color: lightgreen;
  height: 20vh;
  box-sizing: border-box;
}

<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Dosis:400,700" rel="stylesheet">
</head>

<body>
  <title>X. Quisite</title>
  <nav class="side-menu">
    <ol>
      <li class="about-me">About</li>
      <li class="projects">Projects
        <li>
          <li class="skills">Services</li>
          <li class="contact">Contact</li>
    </ol>
  </nav>
</body>

</html>

Answer 1

justify-content属性仅适用于Flex容器。因此，它必须适用于同时具有display: flex或display: inline-flex（read more）的元素。

＆＃13;

body {
  display: flex;
  height: 100vh;
  margin: 0;
  background-color: black;
}

.side-menu {
  background-color: lightcoral;
  font-size: 2em;
  text-transform: uppercase;
  justify-content: space-between;
  display: flex;           /* new */
  flex-direction: column;  /* new */
}

a {
  padding: 0px 30px;
}

＆＃13;

<nav class="side-menu">
  <a class="about-me">About</a>
  <a class="projects">Projects</a>
  <a class="skills">Services</a>
  <a class="contact">Contact</a>
</nav>

＆＃13;

Answer 2

在应用flex之类的justify-content: space-between;规则时，您需要将它们应用于声明了display: flex规则的元素。

这些flex规则仅适用于直接后代嵌套元素，因此您应将它们声明为无序列表项（ol），然后指定flex-direction: column以便您可以< em>垂直证明内容。此外，您可以声明align-items: center;水平对齐列表项（如果方向已指定为水平或行，则这些规则通常反向工作，例如：flex-direction: row）。

最后，如果您声明fixed和top: 0属性，则bottom: 0导航将占据视口的整个高度。

*{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-family: 'Dosis', sans-serif;
}
body{
    display: flex;
    min-height: 100vh;
    flex-flow: row wrap;
    margin: auto;
    background-color: black;
}

.side-menu {
    background-color: lightcoral;
    font-size: 2em;
    text-transform: uppercase;
    position: fixed;
    top: 0;
    bottom: 0;
}

.side-menu ol {
    list-style-type: none;
    max-width: 100%;
    padding: 0px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: 0;
    height: 100%;
    align-items: center;
}

.side-menu li{
    /*line-height: 5em;*/ /* unset for code snippet preview */
}

#projects{
}
.top-header{
    background-color: lightgreen;
    height: 20vh;
    box-sizing: border-box;
}

<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Dosis:400,700" rel="stylesheet">
</head>
<body>
    <title>X. Quisite</title>
        <nav class="side-menu">
            <ol>
                <li class="about-me">About</li>
                <li class="projects">Projects</li>
                <li class="skills">Services</li>
                <li class="contact">Contact</li>
            </ol>
        </nav>
    </body>
</html>

Flexbox对齐中心

2 个答案: