Flex不会将物品并排放置

Question

I'm working on duplicating this website for practice. 我正在复制该网站进行练习。 using flex to put the navbar side-by-side with the rest of the page (refer to link), but the items aren't going side by side, they're just overlapping. 使用flex将导航栏与页面的其余部分并排放置（请参阅链接），但是这些项目并不能并排，它们只是重叠的。 i tried using the overflow: hidden;, like you would for float. 我尝试使用溢出：隐藏；就像您将浮动。 i tried adding fixed height and width to the items. 我尝试为项目添加固定的高度和宽度。 can't figure out why they wont go side by side like they're supposed to 无法弄清楚为什么他们不会像应该那样并肩前进

<!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>

the css: 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

I figured it out. 我想到了。 It was not flex-direction column, row was correct. 不是弹性方向列，行是正确的。 but since i tried to do a "position: fixed;" 但是由于我试图做一个“位置：固定”； on the navbar, it screwed up the flexbox. 在导航栏上，它拧紧了弹性盒。 once i removed that, it worked. 一旦我删除了它，它就会起作用。 my question now is, is there a way to do a non-scrolling section with flex or will i have to use a different method 我现在的问题是，是否可以使用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