I'm trying to make menu on top bar but I want to make a little bit of space between each element. How can I make some space between each menu item?
.TopMenu {
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 40px
}
<div class="TopMenu">
<a class="active" href="#home">Inicio</a>
Tecnologias Que Trabajamos
Labs
Contacto
Legal
</div>
Since you are using a flexbox container you can use the gap attribute on your flex element as follows:
.TopMenu {
gap: 10px;
}
You should also add some styling to the a links. Adding :not(:first-of-type) makes sure this will only happen from the second item and onward
.TopMenu a:not(:first-of-type) {
padding-left: 8px;
}
Just switch justify-content to space-between
.TopMenu{
display: flex;
align-items: center;
width: 50%;
height: 40px;
justify-content: space-between;
}
<html>
<body>
<div class="TopMenu">
<a class="active" href="#home">Inicio</a>
Tecnologias Que Trabajamos
Labs
Contacto
Legal
</div>
</body>
</html>
See it in jsfiddle
Related
I'm trying to use flexbox (justify-content: space-between;) to push the Motorola logo to the left and the red block (nav-bar) to the right. It actually works pretty well as long as there is no anchor tag involved. However, I need anchor tags so that visitors can actually click on each item of the nav-bar and get to the respective section of the website.
How can I make justify-content work without removing the anchor tags?
HTML
<div id="header">
<img id="header-img" src="https://upload.wikimedia.org/wikipedia/commons/2/22/Motorola_Logo_White.png" alt="This is Motorolas Logo">
<div id="nav-bar">
<div id="nav1" class="nav-link"><a href="#prices">Prices</div>
<div id="nav2" class="nav-link"><a href="#prices">Specs</div>
<div id="nav3" class="nav-link"><a href="#prices">Reviews</div>
</div>
</div>
CSS
#header {
background-color: gray;
position: fixed;
justify-content: space-between;
z-index: 1;
display: flex;
width: 100%;
height: 4rem;
}
#header-img {
background-color: orange;
height: 4rem;
width: 25%;
display: flex;
align-items: center;
justify-content: center;
}
#nav-bar {
background-color: red;
width: 25%;
height: 4rem;
display: flex;
justify-content: space-around;
align-items: center;
}
Here you can see it on Codepen
In cases where you have a flex container with left-aligned content - except one or more items you want to right-align, there is a shortcut using the margin property.
If you add the following rule to your existing styles:
#nav-bar {
margin-left: auto; /* Pushes the element right inside a flex container */
}
It should work as you want. You could even remove the justify-content: space-between; rule from your #header selector.
I have a Flexbox in use for header navigation, the logo is aligned to the left and the ul items are aligned to the right as in a traditional style. Both the logo and the navigation links are flex items within a full width Flexbox, and I have given them both flex: 50%. The navigation links section is also a Flexbox (an inner Flexbox) to prevent the menu from stacking and instead behaving in a better responsive manner.
When I apply justify-content to that inner Flexbox, there is no change to the links, as if there is an overriding style or the property does not work on an inner text box. I should like the navigation links to equally divide themselves among the 50% of the screen width.
I've toyed with placing flex: auto on the items but can't keep it within the current layout by doing that, and I've tried fiddling with inline elements to see if I can remove any overriding property, but no cigar.
#nav {
display: flex;
flex: 50%;
align-items: center;
}
#logo {
margin-right: auto;
width: 50px;
height: auto;
}
#links {
margin-left: auto;
display: flex;
justify-content: space-between;
}
#links a {
text-decoration: none;
}
<nav id="nav">
<img id="logo" src="https://pngimage.net/wp-content/uploads/2018/06/logo-placeholder-png.png"/>
<ul id="links">
<li><a href="#">Link1<a></li>
<li><a href="#">Link2<a></li>
<li><a href="#">Link3<a></li>
<li><a href="#">Link4<a></li>
</ul>
</nav>
You were pretty close. Important changes I made were to set the width of the #links <ul> to 50% and add justify-content: space-between to the container #nav wrapper. A few other style changes to the ul so it doesnt have default margin and padding and I think it is behaving as you are expecting now..
#nav {
display: flex;
align-items: center;
justify-content: space-between;
}
#logo {
width: 50px;
flex: 0 0 50px;
}
#links {
width: 50%;
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
list-style: none;
}
#links a {
text-decoration: none;
}
<nav id="nav">
<img id="logo" src="https://pngimage.net/wp-content/uploads/2018/06/logo-placeholder-png.png"/>
<ul id="links">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul>
</nav>
I think you have problem with flex: 50%; CSS deceleration. It's not at proper place. I have re-write the html to use it properly and fixed the CSS according.
Here is the Modified CSS
#nav {
display: flex;
background: #eee;
}
#nav>#logo,
#nav>#links {
flex: 50%;
}
#logo img {
width: 50px;
height: auto;
}
#links {
display: flex;
justify-content: space-around;
list-style-type: none;
}
#links a {
text-decoration: none;
}
<nav id="nav">
<div id="logo"><img src="https://pngimage.net/wp-content/uploads/2018/06/logo-placeholder-png.png" /> </div>
<ul id="links">
<li><a href="#">Link1<a></li>
<li><a href="#">Link2<a></li>
<li><a href="#">Link3<a></li>
<li><a href="#">Link4<a></li>
</ul>
</nav>
Also the code available at codepen https://codepen.io/mobarak/pen/jRjZxB/
Here is an image of my side nav. I'd like to have more control over evenly distributing these items in the nav (there is more room on top and bottom than is show in the image).
Image of the side nav elements, with grid and Materialize formatting things correctly.
Here the relevant code (using grid, which is not included here, as well as the "grid" module from Materialize, which gives me some helps for formatting text etc.):
.nav-side-wrapper {
display: flex;
flex-direction: column;
}
.nav-side {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
width: 100%;
}
.side-nav-links {
border-bottom: 2px solid;
}
<nav class="valign-wrapper nav-side-wrapper">
<div class="container nav-side">
<ul class="side-nav-links center-align">
<li>Learning Hub</li>
<li>Resources</li>
<li>Glossary</li>
</ul>
<ul class="center-align side-buts">
<li><button class="but-test">Click me!</button></li>
<li><button class="but-test">Click me!</button></li>
<li><button class="but-test">Click me!</button></li>
</ul>
</div>
</nav>
I've tried all combinations, removing the valign-wrapper and center-align helpers from Materialize, moving the flex code (display, flex-direction, justify-content, etc.) around, trying seemingly every combination between which lines go where, between .nav-side-wrapper and .nav-side.
It's really stumping me... Any help would be majorly appreciated.
Ideally, I'd like the links to be spaced along the top half of the nav, and the buttons evenly spaced along the bottom half of the nav.
A solution to this is to set the flex property to 1 on the flex child. When this property is set on a flexible item, it will make all the items the same length. If you add padding to your top and bottom of the flex child as well, you can play around with the perception of the height. The snippet shows the parent flex to be a height of 400px. You can play around with the height to see how it retains the space-around spacing.
.nav-side-wrapper {
height: 400px;
width: 30%;
display: flex;
flex-direction: column;
background-color: pink;
justify-content: space-around;
}
.nav-side {
display: flex;
-webkit-flex: 1;
/* Safari 6.1+ */
-ms-flex: 1;
/* IE 10 */
flex: 1;
flex-direction: column;
justify-content: space-around;
align-items: center;
padding: 10% 0px;
}
hr {
border: none;
background-color: black;
height: 2px;
width: 90%;
}
<nav class="nav-side-wrapper">
<div class="nav-side">
<div>Learning Hub</div>
<div>Resources</div>
<div>Glossary</div>
</div>
<div>
<hr>
</div>
<div class="nav-side">
<div><button class="but-test">Click me!</button></div>
<div><button class="but-test">Click me!</button></div>
<div><button class="but-test">Click me!</button></div>
</div>
</nav>
try adding this your CSS
.nav-side {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
height: 100%;
width: 100%;
}
.side-buts{
display: flex;
justify-content: space-around;
flex-direction: column;
}
I'm trying to create a simple footer with images to each side and some text in the middle.
Problem is the images aren't the same size and therefore the alignment is from top to bottom , i know their is a way to align to middle - I've tried to use
vertical-align:middle
But it didn't work.
Here is what I've done so far - if you have more tips for me regarding doing footer right i'll be glad to hear.
Fiddle
Use the flexbox module with justify-content: space-between. This will push the child nodes of your container away from each other so the left and right images sit against the edges.
footer {
display: flex;
justify-content: space-between;
text-align: justify;
}
<footer>
<img>
<span>text</span>
<img>
</footer>
display: flex; align-items: center; justify-content: center; on the footer ul will align the items in the footer vertically and horizontally. Also removed the fixed height from your footer and am applying top/bottom padding instead which will ensure even spacing on the top/bottom. And you have a random stray </p> that needs to be removed.
img {
width: 120px;
}
.container-footer {
margin: auto;
width: 100%;
text-align: center;
}
#footer {
background-color: #01b3d0;
padding: 1em 0;
}
#footer-images ul {
padding: 0;
}
#footer-images li {
list-style: none;
margin: 0 10px;
display: block;
}
#footer-images ul {
display: flex;
justify-content: center;
align-items: center;
}
<div class="container-footer">
<div id="footer">
<div id="footer-images">
<ul>
<li class="pull-left">
<img src="http://www.essai-automobile.com/actualites/photos-logos/jaguar-logo.png" class="pull-left img-responsive">
</li>
<li class="pull-center">©QBS LAB - ©TCWD 2017</li>
<li class="pull-right">
<img src="https://s-media-cache-ak0.pinimg.com/originals/9e/0d/0d/9e0d0d29921036c2ff5e78d891573f45.png" class="pull-right img-responsive">
</li>
</ul>
</div>
</div>
</div>
I'm trying to center horizontally (img - .info - img) using space-between property. I'm facing a little issue the space-between doesn't add spaces between elements.
I know I'm missing something but I can't figure it out!
HTML:
<ul>
<li class="box-match">
<a href="#">
<img src="http://lorempixel.com/20/21" class="team1" alt="">
<div class="info">
<span class="time">10:30</span>
<span class="score">0-2</span>
</div>
<img src="http://lorempixel.com/20/20" class="team2" alt="">
</a>
</li>
</ul>
CSS:
a{
text-decoration: none;
width: 98px;
height: 40px;
display: flex;
flex-flow: row no-wrap;
align-items: center;
align-content: space-between;
background-color: lightgray;
}
.info{
text-align: center;
display: block;
width: 40px;
}
ul{
list-style: none;
}
http://codepen.io/eldev/pen/EaQJvR?editors=110
You are looking for justify-content: space-between.
Updated Example
MDN justify-content
The CSS justify-content property defines how a browser distributes available space between and around elements when aligning flex items in the main-axis of the current line. The alignment is done after the lengths and auto margins are applied, meaning that, if there is at least one flexible element, with flex-grow different than 0, it will have no effect as there won't be any available space.
a {
text-decoration: none;
width: 98px;
height: 40px;
display: flex;
flex-flow: row no-wrap;
align-items: center;
justify-content: space-between;
background-color: lightgray;
}
In my case one of the flex items had a margin-left: 100px; set. Removing it fixed the problem.
Try to add a width to your ul, if no width no space to let between.