This question already has answers here:
CSS - Flex one item floated left
(3 answers)
CSS3 Flex: Pull child to the right
(1 answer)
Closed 5 years ago.
I wanna ask about flexbox. If I have code like this
HTML
<nav>
<ul class="container">
<li>First menu</li>
<li>Last menu</li>
</ul>
</nav>
CSS
.container {width: 80%; margin: 0 auto; height: 100%;}
nav { /*some styling height color etc*/ }
ul {
display: flex;
align-items: center;
}
li:first-child {
/*positioning on the left*/
}
li:last-child {
/*positioning on the right*/
}
how can I make the first menu on the left and last menu on the right with css flexbox?
DUPLICATE
: CSS - Flex one item floated left
Simply use justify-content:space-between in parent container:
.container {
width: 80%;
margin: 0 auto;
height: 100%;
}
nav {
/*some styling height color etc*/
}
ul {
display: flex;
align-items: center;
justify-content:space-between;
}
<nav>
<ul class="container">
<li>First menu</li>
<li>Last menu</li>
</ul>
</nav>
Or you can use margin-left:auto; with the last child or margin-right: auto; with the first child item:
.container {
width: 80%;
margin: 0 auto;
height: 100%;
}
nav {
/*some styling height color etc*/
}
ul {
display: flex;
align-items: center;
}
ul > li:first-child {
margin-right:auto;
}
/*or
ul > li:last-child {
margin-left:auto;
}
*/
<nav>
<ul class="container">
<li>First menu</li>
<li>Last menu</li>
</ul>
</nav>
Related
I am trying to vertically align the tex of a nav bar that is in display: flex;.
I have used the following code yet the text is still aligned to the top of the nav container and won't move down to the center.
Could you please help me understand what I have done wrong? I have tried moving align-items: center; to the nav{} and nav ul li{} in CSS but it doesn't change anything.
nav {
background-color: aquamarine;
width: 100%;
height: 70px;
}
nav ul {
list-style: none;
display: flex;
justify-content: space-around;
align-items: center;
}
nav ul li {
font-size: 3rem;
}
<nav>
<ul>
<li>About Us</li>
<li>Event Schedule</li>
<li>Contact Us</li>
</ul>
</nav>
Just add height: 100% to nav ul
nav {
background-color: aquamarine;
width: 100%;
height: 70px;
}
nav ul {
list-style: none;
display: flex;
justify-content: space-around;
align-items: center;
height: 100%;
}
nav ul li {
font-size: 3rem;
}
<nav>
<ul>
<li>About Us</li>
<li>Event Schedule</li>
<li>Contact Us</li>
</ul>
</nav>
The items are vertically aligned, or at least they try to be, but you have set the font size so large that they break out of your fixed-height container. Possible solutions:
Don't set the font-size.
Don't fix the height of the parent element.
I have a nav element with an unordered list and several items. I am using Flexbox to ensure sufficient width between the items and account for Media Queries. However, My background-color property isn't spanning the entire width/height of the navbar. Do I need to set these properties on a different element?
nav {
background-color: #dddddd;
& ul {
display: flex;
width: 100%;
list-style-type: none;
& li {
flex-grow: 1;
flex-shrink: 1 auto;
flex-basis: 100%;
}
& li a {
text-decoration: none;
}
}
}
<nav>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<ul>
</nav>
1st. Close your ul with </ul>
2nd. Are you talking about the margin at left and right? By default, body have an 8px margin.
If you add this will remove it:
body {
margin: 0;
}
Also, I compiled your SASS to CSS just showing the example here.
The following could be really helpful to understand the default CSS value for each HTML elements.
Default CSS Values for HTML Elements
https://www.w3schools.com/cssref/css_default_values.asp
body {
margin: 0;
}
nav {
background-color: #dddddd;
}
nav ul {
display: flex;
width: 100%;
list-style-type: none;
}
nav ul li {
flex-grow: 1;
flex-shrink: 1 auto;
flex-basis: 100%;
}
nav ul li a {
text-decoration: none;
}
<nav>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</nav>
I'm starting with Flexbox and I'm trying to center a row with three columns to the center of the document. I've tried the following code (Written in Sass) but as you can see in the screenshot the three elements are not perfectly centered (they don't have the same space between them):
HTML for the header:
<header>
<nav>
<ul>
<li>ELE 1</li>
<li>ELEMENT 2</li>
<li>ELEMENT 3</li>
</ul>
</nav>
</header>
SCSS for the header:
header {
height: 80px;
width: 100%;
background-color: $dark-grey;
}
nav {
height: inherit;
max-width: 800px;
margin: auto;
text-align: center;
display: flex;
align-items: center;
& ul {
width: 100%;
display: flex;
& li {
flex: 1 0 auto;
& a, a:visited {
color: $white-alpha;
}
& a.active {
color: $white;
}
}
}
}
I've recreated the problem in this CodePen, as you can see the real example. What I'm doing wrong? Thanks.
I have a navigation with ten items inside it and I want to maximize its length and set the spaces between the items equally.
So far, this is what I've done. But it only looks nice if the menu items' lengths are equal, but mine isn't. Ideas, anyone? Thanks in advance.
<nav class="menu">
<ul>
<li>Home</li>
<li>About Us</li>
<!-- eight more menu items -->
</ul>
</nav>
And here's my stylesheet.
.menu {
width: 100%;
}
.menu li {
display: inline-block;
width: 10%; /* since I have 10 items */
text-align: center;
}
View this codepen.
You will need to float your li items left.
CSS:
.menu {
width: 100%;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu ul li {
width: 8%;
text-align: center;
margin: 0% 1%;
float: left;
padding: 0;
}
It's important to keep track of your total width (100%). Each item should be 10% (since you are having 10 items) in total. This means when you want a margin of 1% on the left and on the right side, your li item should have a width of 8%.
Your total width should always be 100%. Otherwise your user will be able to scroll horizontally.
add margin for li in css file.
.menu li {
display: inline-block;
margin-left:1%;
width: 6%; /* since I have 10 items */
text-align: center;
}
Or use #media rule is used to define different style rules for different media types/devices
Use the modern flexbox technique for the solution. No need to set any width or margin.
Check the browser compatibility table: Flexbox
Use the CSS Prefixer to support some of the older browsers:
* {
margin: 0;
padding: 0;
}
.menu ul {
display: flex;
flex-direction: row nowrap;
justify-content: space-around;
}
.menu li {
list-style: none;
}
<nav class="menu">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Home</li>
<li>About Us</li>
<li>Home</li>
<li>About Us</li>
<li>Home</li>
<li>About Us</li>
<li>Home</li>
<li>About Us</li>
</ul>
</nav>
you could have ato add float css rule to the ul element.
.menu ul{padding:0px;}
.menu {
width: 100%;
}
.menu ul li {
float:left;
width: 10%; /* since I have 10 items */
text-align: center;
}
try with above code
I want to make a horizontal centered menu. I have tried using things like text align center and margin auto but can't get them to work. I do not want to use a table.
Here's my code:
<footer class="container">
<div class="row">
<div class="span12">
<ul>
<li>footer info 1</li>
<li>footer info 2</li>
<li>footer info 3</li>
</ul>
</div>
</div>
With the provided HTML:
ul { text-align: center; }
li { display: inline-block; } /* Don't float them */
http://jsfiddle.net/NpLR3/
The following will work without using text-align:
footer {
width: 100%;
}
.row {
position: absolute;
left: 50%;
}
.span12 {
position: relative;
left: -50%;
}
ul {
padding: 0;
}
li {
display: inline;
list-style: none;
margin-left: 1em;
}
li:first-child {
margin-left: 0;
}
The important bits are:
(1) that the outer container for the menu has 100% width,
(2) that the inner container is absolutely positioned at 50% left (which positions the left side of the menu at the center of the page), and
(3) that the menu is then relatively positioned at -50% left (moving it back to the left half its width, so that the center of the menu is now at the center of the page).
The other stuff is just cosmetic.
See working example.
Demo
.container{
background:#ddd;
width: 100%;
text-align:center;
}
li{
display: inline-block;
}
See http://jsfiddle.net/aCSgz/
Basically you need to set the ul and li to display: block.
ul { display: block; text-align:center; }
ul li { display: block; }
You need to set the display property on the LIs to inline-block and set the text-align on the UL to center.
HTML:
<footer class="container">
<div class="row">
<div class="span12">
<ul>
<li>footer info 1</li>
<li>footer info 2</li>
<li>footer info 3</li>
</ul>
</div>
</div>
</footer>
CSS:
footer {
background:#fdd;
}
div.row {
background: #dfd;
}
ul {
background: #ddf;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
li {
display: inline-block;
background: #fff;
margin: 0.5em;
padding: 0.5em;
}
http://jsfiddle.net/ghodmode/h2gT3/1/