Flex 不会并排放置物品答案

【问题标题】：Flex wont place items side-by-sideFlex 不会并排放置物品
【发布时间】：2018-11-19 00:00:49
【问题描述】：

我正在复制this website 以进行练习。使用 flex 将导航栏与页面的其余部分并排放置（请参阅链接），但项目并没有并排，它们只是重叠。我尝试使用溢出：隐藏；，就像你对浮动一样。我尝试为项目添加固定的高度和宽度。无法弄清楚为什么他们不会像他们应该的那样并排走

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="practice.css">
</head>
<body>
<div class="wholepage">
    <nav class="navbar">
        <ul>
            <li><a href="#">H</a></li>
            <li><a href="#">C</a></li>
            <li><a href="#">P</a></li>
        </ul>
    </nav>
    <div class="body">
        <div class="head">
            <div class="left"><h1>essential<br>looks</h1></div>
            <div class="right"></div>
        </div>
    </div>
</div></body>
</html>

CSS：

.wholepage {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  overflow: hidden; 
}

.navbar {
  width: 5%;
  background-color: #353535;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  position: fixed;
}

.navbar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.navbar li {
  color: white;
  margin: 9px auto;
}

.navbar a {
  text-decoration: none;
  color: white;
  font-size: 1.25rem;
 }

.body {
  overflow: hidden;
}

.head {
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 80%;
  margin: auto;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}   

.left {
  float: left;
}
/*# sourceMappingURL=practice.css.map */

【问题讨论】：

标签： html css flexbox

【解决方案1】：

我想通了。它不是 flex-direction 列，行是正确的。但因为我试图做一个“位置：固定；”在导航栏上，它搞砸了 flexbox。一旦我删除它，它就起作用了。我现在的问题是，有没有办法用 flex 做一个非滚动部分，或者我必须使用不同的方法

【讨论】：

我建议你接受你自己的答案而不是现在接受的，因为那个答案是完全错误的（我在另一条评论中写过）。