Why wont 'justify-content: space-between' make the navbar go to the right hand side?
Question
I'm quite new to html and css but can't seem to wrap my head around why justify-content isn't working right. Inline block seems to make sure the .navbar_wrapper doesn't have a 100% width and the <a> link element doesn't have a max-width either so I'm unsure as to why they aren't being spaced at all or affected by the header flex container.
@import url('https"//fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap'); * { margin: 0; padding: 0; /* box-sizing: border-box; */ font-family: "Poppins", sans-serif; }.header { position: fixed; height: 70px; }.logo { align-items: center; display: inline-block; margin: 20px 70px; }.navbar_wrapper { position: absolute; right: 0; top: 0; height: 94px; margin: 0px 70px; display: flex; align-items: center; }.navbar_wrapper>a:not(:last-child) { margin-right: 40px; text-decoration: none; color: black; cursor: pointer; }.navbar_wrapper>a:nth-child(4) { text-decoration: none; color: black; cursor: pointer; }.sb_logo { height: 50px; width: 50px; }.section { position: relative; width: 100%; min-height: 100vh; padding: 100px; display: flex; justify-content: space-between; align-items: center; background: white; }.navbar_wrapper { display: inline-block; }.header { position: absolute; top: 0; left: 0; width: 100%; padding: 20px 100px; display: flex; justify-content: space-around; align-items: center; }
<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Document</title> </head> <body> <section> <header> <a href="#" class="logo"> <img src="images/logo.png" alt="" class="sb_logo" /> </a> <div class="navbar_wrapper"> <a href="#" class="home">Home</a> <a href="#" class="menu">Menu</a> <a href="#" class="what's new">What's New</a> <a href="#" class="contact">Contact</a> </div> </header> </section> </body> </html>
1 answers
solution1
1 ACCPTED 2021-01-31 16:44:27
Removing the left and right margins from .logo and .navbar_wrapper will lead to the desired result - see snippet below.
But please note that my fix actually has nothing to do with any flexbox settings. Your flexbox container ( section ) only has one child ( <header> ) - a situation where flex would be only useful for centering that child (which is not the case here), but nothing else.
My removing the side margins simply moves the .navbar_wrapper to the far right (according to its right: 0; setting as an absolutely positioned element) and moves the .logo element (which does not have a position setting) to the left. As I said - has nothing to do with flexbox settings, rather with the absolute position of .navbar_wrapper .
But back to your flexbos settings: The justify-content: space-between; setting of section could be moved to <header> to actually be effective. In this case you wouldn't need the absolute position on .navbar_wrapper (which IMO would be a better solution).
@import url('https"//fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap'); * { margin: 0; padding: 0; /* box-sizing: border-box; */ font-family: "Poppins", sans-serif; }.header { position: fixed; height: 70px; }.logo { align-items: center; display: inline-block; margin-top: 20px; }.navbar_wrapper { position: absolute; right: 0; top: 0; height: 94px; margin-top: 20px; display: flex; align-items: center; }.navbar_wrapper>a:not(:last-child) { margin-right: 40px; text-decoration: none; color: black; cursor: pointer; }.navbar_wrapper>a:nth-child(4) { text-decoration: none; color: black; cursor: pointer; }.sb_logo { height: 50px; width: 50px; }.section { position: relative; width: 100%; min-height: 100vh; padding: 100px; display: flex; justify-content: space-between; align-items: center; background: white; }.navbar_wrapper { display: inline-block; }.header { position: absolute; top: 0; left: 0; width: 100%; padding: 20px 100px; display: flex; justify-content: space-around; align-items: center; }
<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Document</title> </head> <body> <section> <header> <a href="#" class="logo"> <img src="images/logo.png" alt="" class="sb_logo" /> </a> <div class="navbar_wrapper"> <a href="#" class="home">Home</a> <a href="#" class="menu">Menu</a> <a href="#" class="what's new">What's New</a> <a href="#" class="contact">Contact</a> </div> </header> </section> </body> </html>
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.