Flex wont place items side-by-side
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. 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:
.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 */
1 answers
solution1
0 ACCPTED 2018-11-18 16:00:49
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.