Question

我正在复制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 */

Answer 1

我知道了。不是弹性方向列，行是正确的。但是由于我试图做一个“位置：固定”；在导航栏上，它拧紧了弹性盒。一旦我删除了它，它就会起作用。我现在的问题是，有没有办法用flex做非滚动部分，还是我必须使用其他方法

Flex不会将物品并排放置

1 个答案: