Flex不會將物品並排放置

Question

我正在復制該網站進行練習。 使用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 個解決方案

解決方案1
0 已采納 2018-11-18 16:00:49

Flex不會將物品並排放置

問題描述

1 個解決方案

解決方案1 0 已采納 2018-11-18 16:00:49

解決方案1
0 已采納 2018-11-18 16:00:49