Is there a more flexbox-ish way to right-align "Contact" than to use position: absolute
?
.main { display: flex; } .a, .b, .c { background: #efefef; border: 1px solid #999; } .b { flex: 1; text-align: center; } .c { position: absolute; right: 0; }
A more flex approach would be to use an auto
left margin (flex items treat auto margins a bit differently than when used in a block formatting context).
.c {
margin-left: auto;
}
Updated fiddle:
.main { display: flex; } .a, .b, .c { background: #efefef; border: 1px solid #999; } .b { flex: 1; text-align: center; } .c {margin-left: auto;}
Is there a more flexbox-ish way to right align "Contact" than to use position absolute?
Here you go. Set justify-content: space-between
on the flex container.
.main { display: flex; justify-content: space-between; } .a, .b, .c { background: #efefef; border: 1px solid #999; } .b { text-align: center; }
justify-content: flex-end
.c::after
pseudo-element. In my experience, margin-left: auto;
is the way to go.
flex-flow: row-reverse;
You can also use a filler to fill the remaining space.
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="filler"></div>
<div class="c"><a href="#">Contact</a></div>
</div>
.filler{
flex-grow: 1;
}
I have updated the solution with 3 different versions. This because of the discussion of the validity of using an additional filler element. If you run the code snipped you see that all solutions do different things. For instance setting the filler class on item b will make this item fill the remaining space. This has the benefit that there is no 'dead' space that is not clickable.
justify-content: space-between
is "so much" css, seriously? No need for further comments (but if you want - welcome to chat). This answer has its right to be here, because it is a solution. But definitely not optimal one. Idk, maybe you did't notice but most of css from another answers are OP's and answers actually reduce (a little bit) amount of author's css. This answer does not have less css then others (will not work without OP's css - jsfiddle.net/63ma3b56). But it has one more html element.
If you want to use flexbox for this, you should be able to, by doing this (display: flex
on the container, flex: 1
on the items, and text-align: right
on .c
):
.main { display: flex; }
.a, .b, .c {
background: #efefef;
border: 1px solid #999;
flex: 1;
}
.b { text-align: center; }
.c { text-align: right; }
...or alternatively (even simpler), if the items don't need to meet, you can use justify-content: space-between
on the container and remove the text-align
rules completely:
.main { display: flex; justify-content: space-between; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
Here's a demo on Codepen to allow you to quickly try the above.
space-between
was exactly what I was looking for, thanks!
justify-content: space-between
on the container did not move the item right, but text-align: right
did, thanks.
Or you could just use justify-content: flex-end
.main { display: flex; }
.c { justify-content: flex-end; }
justify-content
attribute is an attribute of the flex-container, see Chris Coyer's flexy cheatsheet: css-tricks.com/snippets/css/a-guide-to-flexbox
As easy as
.main {
display: flex;
flex-direction:row-reverse;
}
Add the following CSS class to your stylesheet:
.my-spacer {
flex: 1 1 auto;
}
Place an empty element between the element on the left and the element you wish to right-align:
<span class="my-spacer"></span>
margin-left: auto works well. But clean flex box solution would be space-between in the main class. Space between works well if there is two or more elements. I have added a solution for single element as well.
.main { display: flex; justify-content: space-between; } .a, .b, .c { background: #efefef; border: 1px solid #999; padding: 0.25rem; margin: 0.25rem;} .b { flex: 1; text-align: center; } .c-wrapper { display: flex; flex: 1; justify-content: flex-end; } .c-wrapper2 { display: flex; flex: 1; flex-flow: row-reverse; }
If you need one item to be left aligned (like a header) but then multiple items right aligned (like 3 images), then you would do something like this:
h1 {
flex-basis: 100%; // forces this element to take up any remaining space
}
img {
margin: 0 5px; // small margin between images
height: 50px; // image width will be in relation to height, in case images are large - optional if images are already the proper size
}
Here's what that will look like (only relavent CSS was included in snippet above)
https://i.stack.imgur.com/i65gn.png
'justify-content: flex-end' worked within price box container.
.price-box {
justify-content: flex-end;
}
I find that adding 'justify-content: flex-end' to the flex container solves the problem while 'justify-content: space-between' doesnt do anything.
Example code based on answer by TetraDev
Images on right:
* { outline: .4px dashed red; } .main { display: flex; flex-direction: row; align-items: center; } h1 { flex-basis: 100%; } img { margin: 0 5px; height: 30px; }
Images on left:
* { outline: .4px dashed red; } .main { display: flex; flex-direction: row; align-items: center; } h1 { flex-basis: 100%; text-align: right; } img { margin: 0 5px; height: 30px; }
Success story sharing
flex
,order
, etc).justify-content: space-between;
only accomplishes that you want if you only have 2 items in your flex container (first item would be on the left and second one would be to the right). But for more than 2 items, to only align some on the right, this is the correct approach!margin-left: auto;
style.