I've started getting to grips with flex and as soon as I think I have a solid understanding and tried to implement it I find it's not working.
The main issue is the justify-content: space-evenly
inside my ul
isn't taking any effect and I can't see why. From everything I've looked at this is correct and should work, I've even seen people using this in tutorials within the same structure.
I placed a border around the element to make sure there is space for it to take up. I've tried different flex properties, they wont work either. Am I doing something do disable flex?
Any ideas what I'm doing wrong here?
CSS
h1 {
font-size: 6em;
text-align: center;
}
nav {
font-size: 1.5em;
display: flex;
justify-content: space-between;
}
ul {
border: 1px solid red;
display: flex;
flex-grow: 1;
justify-content: space-evenly;
max-width: 50%;
}
ul,li {
display: inline;
margin: 0;
padding: 0;
}
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Queries</title>
<link href="https://fonts.googleapis.com/css2?family=Open Sans:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="app.css">
</head>
<body>
<nav>
<a href="#home">Home</a>
<ul>
<li>
<a href="#Home">Learn More</a>
</li>
<li>
<a href="#Home">About</a>
</li>
<li>
<a href="#Home">Contact</a>
</li>
</ul>
<a href="#signup">Sign Up</a>
</nav>
<h1>Flex Box
</h1>
</body>
</html>
CodePudding user response:
You need to remove the "display: inline" from the ul and li selectors.
ul,li {
margin: 0;
padding: 0;
}
CodePudding user response:
Here you can try this logic, it works :
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Media Queries</title>
<link
href="https://fonts.googleapis.com/css2?family=Open Sans:wght@300&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="app.css" />
</head>
<style>
h1 {
font-size: 6em;
text-align: center;
}
nav {
font-size: 1.5em;
display: flex;
justify-content: space-between;
}
ul {
border: 1px solid red;
max-width: 50%;
}
ul,
li {
display: inline;
margin: 0;
padding: 0;
}
ul {
display: flex;
flex-grow: 1;
justify-content: space-evenly;
}
</style>
<body>
<nav>
<a href="#home">Home</a>
<ul>
<li>
<a href="#Home">Learn More</a>
</li>
<li>
<a href="#Home">About</a>
</li>
<li>
<a href="#Home">Contact</a>
</li>
</ul>
<a href="#signup">Sign Up</a>
</nav>
<h1>Flex Box</h1>
</body>
</html>
CodePudding user response:
You're overriding the ul{display:flex}
with ul,li {display: inline;}
. Remove the display:inline
for the ul and keep your margin and padding with ul, li{}
.
h1 {
font-size: 6em;
text-align: center;
}
nav {
font-size: 1.5em;
display: flex;
justify-content: space-between;
}
ul {
border: 1px solid red;
display: flex;
flex-grow: 1;
justify-content: space-evenly;
max-width: 50%;
}
li {
display: inline;
}
ul,
li {
margin: 0;
padding: 0;
}
<nav>
<a href="#home">Home</a>
<ul>
<li>
<a href="#Home">Learn More</a>
</li>
<li>
<a href="#Home">About</a>
</li>
<li>
<a href="#Home">Contact</a>
</li>
</ul>
<a href="#signup">Sign Up</a>
</nav>
<h1>Flex Box</h1>
CodePudding user response:
you're over-writing the display: flex
of your ul by the line of code below that (display: inline
). here's the solution below with comments. use list-style: none
to get rid of the bullet points on li
h1 {
font-size: 6em;
text-align: center;
}
nav {
font-size: 1.5em;
display: flex;
justify-content: space-between;
}
ul {
border: 1px solid red;
display: flex;
flex-grow: 1;
justify-content: space-evenly;
max-width: 50%;
}
ul,li {
/* -- remove the below line. you're over-writing the display of ul
display: inline;
*/
/* -- add this below line to get rid of the bullet points */
list-style: none;
margin: 0;
padding: 0;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Queries</title>
<link href="https://fonts.googleapis.com/css2?family=Open Sans:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="app.css">
</head>
<body>
<nav>
<a href="#home">Home</a>
<ul>
<li>
<a href="#Home">Learn More</a>
</li>
<li>
<a href="#Home">About</a>
</li>
<li>
<a href="#Home">Contact</a>
</li>
</ul>
<a href="#signup">Sign Up</a>
</nav>
<h1>Flex Box
</h1>
</body>
</html>
CodePudding user response:
You are setting display: flex
with your ul
selector, but afterwards you have another ul
selector -> ul,li
where you set display: inline
So your are overriding your previous display property
ul {
display: flex;
...
}
ul,li {
display: inline;
...
}
So you have to change the second selector. Remove ul
from it.
Also, the ul
element has a padding by default, remove it with padding: 0;
in your ul
selector in order to have it really spaced evenly.
See below example, your space-evenly
is workign here
h1 {
font-size: 6em;
text-align: center;
}
nav {
font-size: 1.5em;
display: flex;
justify-content: space-between;
}
ul {
border: 1px solid red;
display: flex;
flex-grow: 1;
justify-content: space-evenly;
max-width: 50%;
padding: 0;
}
li {
display: inline;
margin: 0;
padding: 0;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Queries</title>
<link href="https://fonts.googleapis.com/css2?family=Open Sans:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="app.css">
</head>
<body>
<nav>
<a href="#home">Home</a>
<ul>
<li>
<a href="#Home">Learn More</a>
</li>
<li>
<a href="#Home">About</a>
</li>
<li>
<a href="#Home">Contact</a>
</li>
</ul>
<a href="#signup">Sign Up</a>
</nav>
<h1>Flex Box
</h1>
</body>