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.
Related
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
I'm basically trying to get the baseline of the value to align with the baseline of the bottom unit instead of the first as it's happening in my code below.
I can get it to work if I ditch flexbox altogether but I need it for responsiveness.
The canonical advice seems to be to wrap flex items in inline-block but, as you can see from that codepen, it doesn't seem to work for me.
Here's the codepen where I've been trying stuff: https://codepen.io/jskrt/pen/OJyXxyv
.value_and_unit {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: baseline;
}
.value {
line-height: 1;
font-size: 120px;
margin-right: 10px;
}
.unit_container {
display: flex;
flex-flow: column nowrap;
justify-content: flex-end;
align-items: center;
}
.divider {
width: 100%;
}
.inline-block {
display: inline-block;
}
<div class="value_and_unit">
<span class="value">
340
</span>
<div class="unit_container">
<span class="unit">
m
</span>
<hr class="divider" />
<span class="unit">
s
</span>
</div>
</div>
Try the following:
.value_and_unit {
display: flex;
/* flex-flow: row nowrap; */
/* justify-content: flex-start; */
/* align-items: baseline; */
}
.value {
font-size: 120px;
margin-right: 10px;
line-height: 1;
}
Tell me if this is the desired effect, and if not, tell me what is the problem, so I have a clue to follow. Good luck!
EDIT: Replace the <h1> tag with <div> because browsers add line-height, margin and other properties to it by default! Style the item as desired, by adding bold by yourself. Keep in mind that h1 is a semantic tag with high weight and should not be used when not required!!!
EDIT2: I forgot to mention that I worked with the code in real environment and not in the code pen and everything seemed well if I understood your problem correctly. Try it yourself in real server too, if there is a problem with the codepen.
If the .value element will contain numbers only, then you can probably get away with a simple adjustment to the line-height. Make it bit smaller, so that the line box shrinks-to-fit the font height.
.value_and_unit {
display: flex;
border: 1px solid red; /* demo */
}
.value {
line-height: .75; /* key adjustment */
font-size: 120px;
margin-right: 10px;
}
.unit_container {
display: flex;
flex-flow: column nowrap;
justify-content: flex-end;
align-items: center;
}
.divider {
width: 100%;
}
<div class="value_and_unit">
<span class="value">340</span>
<div class="unit_container">
<span class="unit">m</span>
<hr class="divider" />
<span class="unit">s</span>
</div>
</div>
However, this method won't work if the .value element contains random letters, because the extra space above and below the numbers exists to accommodate descenders and ascenders.
In such case, you would need to try another method. align-items: flex-end would work (i.e. the visual baselines would be aligned), but the units would align below the numbers in this case.
.value_and_unit {
display: flex;
align-items: flex-end;
border: 1px solid red;
padding: 5px;
}
.value {
font-size: 120px;
margin-right: 10px;
border: 1px dashed blue;
}
.unit_container {
display: flex;
flex-flow: column nowrap;
align-items: center;
border: 1px dashed blue;
}
.divider {
width: 100%;
}
<div class="value_and_unit">
<span class="value">340jÁ </span>
<div class="unit_container">
<span class="unit">m</span>
<hr class="divider" />
<span class="unit">s</span>
</div>
</div>
So, because you want the "s" baseline aligned with the numbers' baseline, you're not actually seeking baseline alignment (because the true baseline of the larger box is under the "j"). You want an arbitrary alignment, so an adjustment to the line-height may be appropriate in this case.
Try to make the align-items value to end. It is like this
align-items: end;
I've been trying to get these objects to center and when I used an <a href> tag, I could see that I was able to click way away from the picture and still the link would activate. I am assuming this means that the child containers are taking up 50% of the width each, despite only a tiny portion of the container being full. Why is there blank space that is preventing me from aligning my objects?
RELEVANT HTML:
<div class="container">
<div class="previous">
<img class="containerimg" src="https://i.imgur.com/YgZ2GOl.png">
<p>Previous Project </p>
</div>
<div class="next">
<img class="containerimg" src="https://i.imgur.com/s11MTLc.png">
<p> Next Project</p>
</div>
</div>
RELEVANT CSS:
.container {
display: flex;
justify-content: center;
}
.containerimg {
width: 30%;
height: auto;
}
.next {
display: flex;
flex-direction: column;
}
.previous{
display: flex;
flex-direction: column;
}
CODEPEN: https://codepen.io/daniel-albano/pen/zYGKZEw?editors=1100
Your question is a little vague, but I'm assuming that you want to center the .previous and .next divs.
Since both of these are using display: flex already, you simply need to add align-items: center to the .previous and .next classes to make them center horizontally. If you also want the content (the image and text) to center vertically, you'll need to add justify-content: center. Here's the result:
.next {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.previous {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
If you're trying to make the images in those divs take up more space, you'll need to increase the width rule below. Since you commented that you need 100%, you'll need to change it to this:
.containerimg {
width: 100%;
height: auto;
}
I found the issue, I needed my images to contain 100% of the space and I needed to assign a width element to the child containers.
.container {
display: flex;
justify-content: center;
width:100vw;
}
.previous, .next{
width:30%;
display:flex;
flex-direction:column;
align-items:center;
}
img{
width:100%;
}
<div class="container">
<div class="previous">
<img class="containerimg" src="https://i.imgur.com/YgZ2GOl.png">
<p>caption 1</p>
</div>
<div class="next">
<img class="containerimg" src="https://i.imgur.com/s11MTLc.png">
<p>caption 2</p>
</div>
</div>
You should be able to solve this issue by adding "align-items: center" to your .next and .previous classes. The reason for this is that when you switch the flex-direction to column that also switches how align-items and justify-content work, essentially reversing them.
.next {
display: flex;
flex-direction: column;
align-items: center;
}
.previous{
display: flex;
flex-direction: column;
align-items: center;
}
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 simple block of text sharing a display: flex container with an <a> tag.
Unfortunately, the wrapping is a bit weird, almost as if the <a> tag's "true" width isn't being treated as such, or like it has a width of 0 (judging by how it is positioned).
Is there some styling I can apply to <a> tags to make it act more "text-like"?
JSFiddle
body {
font-size: 32px;
}
body > .container {
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
}
body > .container > .foot {
flex: 1 0 100%;
background-color: grey;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
body > .container > .foot > .content {
flex: 1 0 70%;
width: 50%;
height: 350px;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: center;
align-content: center;
text-align: center;
}
<div class='container'>
<div class='foot'>
<div class='content'>
We'll be back up shortly. We are undergoing a scheduled maintenance. Apologies for the inconvenience. Check <a href='http://status.mywebsite.com'>http://status.mywebsite.com </a> for updates.
</div>
</div>
</div>
Answer
You have text-align: center which is applying to the text, but not the anchor element.
You have justify-content: flex-start which is applying to the anchor element, but not the text.
All you need is a switch to justify-content: center.
revised fiddle
body {
font-size: 32px;
}
body > .container {
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
}
body > .container > .foot {
flex: 1 0 100%;
background-color: grey;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
body > .container > .foot > .content {
flex: 1 0 70%;
width: 50%;
height: 350px;
display: flex;
flex-flow: row wrap;
justify-content: center; /* ADJUSTED */
align-items: center;
align-content: center;
text-align: center;
}
<div class='container'>
<div class='foot'>
<div class='content'>
We'll be back up shortly. We are undergoing a scheduled maintenance. Apologies for the inconvenience. Check <a href='http://status.mywebsite.com'>http://status.mywebsite.com </a> for updates.
</div>
</div>
</div>
Explanation
You wrote:
I have a simple block of text sharing a display: flex container with an <a> tag.
Well, your block of text isn't as simple as you might think.
You're not dealing with a single string.
What you actually have is a flex container with three flex items:
An anonymous flex item wrapping the text before the anchor element
The anchor element
An anonymous flex item wrapping the text after the anchor element
From the spec:
4. Flex Items
Each in-flow child of a flex container becomes a flex item, and each
contiguous run of text that is directly contained inside a flex
container is wrapped in an anonymous flex item.
The behavior you're seeing is three flex items wrapping.
The anchor text itself will not wrap because it is equivalent to a single word. But if you add spaces and text in the anchor it will wrap like everything else.
Also see this post:
Why do I need "text-align: center" when the container has "justify-content: center"?