How to Right-align flex item?
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; }
<h2>With title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<!--<div class="b"><a href="#">Some title centered</a></div>-->
<div class="c"><a href="#">Contact</a></div>
</div>
http://jsfiddle.net/vqDK9/
html css html5 css3 flexbox
add a comment |
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; }
<h2>With title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<!--<div class="b"><a href="#">Some title centered</a></div>-->
<div class="c"><a href="#">Contact</a></div>
</div>
http://jsfiddle.net/vqDK9/
html css html5 css3 flexbox
2
you can use float right, but it's the same way...! The best way is to use a display table with text-align.
– Yohann Tilotti
Mar 15 '14 at 20:08
Sure, if that's better. Still having trouble right-aligning "Contact" though: jsfiddle.net/vqDK9/1
– Mark Boulder
Mar 15 '14 at 20:27
1
I updated your fiddle jsfiddle.net/vqDK9/2
– Yohann Tilotti
Mar 15 '14 at 20:33
Here are at least two ways to do it: stackoverflow.com/a/33856609/3597276
– Michael_B
Jan 8 '16 at 12:08
add a comment |
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; }
<h2>With title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<!--<div class="b"><a href="#">Some title centered</a></div>-->
<div class="c"><a href="#">Contact</a></div>
</div>
http://jsfiddle.net/vqDK9/
html css html5 css3 flexbox
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; }
<h2>With title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<!--<div class="b"><a href="#">Some title centered</a></div>-->
<div class="c"><a href="#">Contact</a></div>
</div>
http://jsfiddle.net/vqDK9/
.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c { position: absolute; right: 0; }
<h2>With title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<!--<div class="b"><a href="#">Some title centered</a></div>-->
<div class="c"><a href="#">Contact</a></div>
</div>
.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c { position: absolute; right: 0; }
<h2>With title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<!--<div class="b"><a href="#">Some title centered</a></div>-->
<div class="c"><a href="#">Contact</a></div>
</div>
html css html5 css3 flexbox
html css html5 css3 flexbox
edited Mar 6 '18 at 21:52
Melchia
7,54592963
7,54592963
asked Mar 15 '14 at 19:56
Mark BoulderMark Boulder
4,17673461
4,17673461
2
you can use float right, but it's the same way...! The best way is to use a display table with text-align.
– Yohann Tilotti
Mar 15 '14 at 20:08
Sure, if that's better. Still having trouble right-aligning "Contact" though: jsfiddle.net/vqDK9/1
– Mark Boulder
Mar 15 '14 at 20:27
1
I updated your fiddle jsfiddle.net/vqDK9/2
– Yohann Tilotti
Mar 15 '14 at 20:33
Here are at least two ways to do it: stackoverflow.com/a/33856609/3597276
– Michael_B
Jan 8 '16 at 12:08
add a comment |
2
you can use float right, but it's the same way...! The best way is to use a display table with text-align.
– Yohann Tilotti
Mar 15 '14 at 20:08
Sure, if that's better. Still having trouble right-aligning "Contact" though: jsfiddle.net/vqDK9/1
– Mark Boulder
Mar 15 '14 at 20:27
1
I updated your fiddle jsfiddle.net/vqDK9/2
– Yohann Tilotti
Mar 15 '14 at 20:33
Here are at least two ways to do it: stackoverflow.com/a/33856609/3597276
– Michael_B
Jan 8 '16 at 12:08
2
2
you can use float right, but it's the same way...! The best way is to use a display table with text-align.
– Yohann Tilotti
Mar 15 '14 at 20:08
you can use float right, but it's the same way...! The best way is to use a display table with text-align.
– Yohann Tilotti
Mar 15 '14 at 20:08
Sure, if that's better. Still having trouble right-aligning "Contact" though: jsfiddle.net/vqDK9/1
– Mark Boulder
Mar 15 '14 at 20:27
Sure, if that's better. Still having trouble right-aligning "Contact" though: jsfiddle.net/vqDK9/1
– Mark Boulder
Mar 15 '14 at 20:27
1
1
I updated your fiddle jsfiddle.net/vqDK9/2
– Yohann Tilotti
Mar 15 '14 at 20:33
I updated your fiddle jsfiddle.net/vqDK9/2
– Yohann Tilotti
Mar 15 '14 at 20:33
Here are at least two ways to do it: stackoverflow.com/a/33856609/3597276
– Michael_B
Jan 8 '16 at 12:08
Here are at least two ways to do it: stackoverflow.com/a/33856609/3597276
– Michael_B
Jan 8 '16 at 12:08
add a comment |
10 Answers
10
active
oldest
votes
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; }
<h2>With title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<!-- <div class="b"><a href="#">Some title centered</a></div> -->
<div class="c"><a href="#">Contact</a></div>
</div>
175
Orjustify-content: flex-end
– B T
Mar 17 '17 at 0:21
1
Try setting the width of .c to 300px. The title is no longer centered. So yes, this answers the question, but this breaks the design.
– Agamemnus
May 11 '17 at 0:03
11
Note that this doesn't always work the way you may expect, like when there's a.c::after
pseudo-element. In my experience,margin-left: auto;
is the way to go.
– Will
Nov 5 '17 at 4:06
5
Orflex-flow: row-reverse;
– jchook
Feb 9 '18 at 1:21
1
I don't see this being a correct answer if you wan't to align just one item in a flex container.
– Foxhoundn
Jan 22 at 0:01
add a comment |
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;}
<h2>With title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<!--<div class="b"><a href="#">Some title centered</a></div>-->
<div class="c"><a href="#">Contact</a></div>
</div>
<h1>Problem</h1>
<p>Is there a more flexbox-ish way to right align "Contact" than to use position absolute?</p>
4
@MarkBoulder: For compatibility reasons his method is better, but if you're already using flexbox my answer would make more sense.
– Adrift
Mar 16 '14 at 11:46
4
@MarkBoulder: They both accomplish the same thing in this case. The advantage would be having other properties (and behaviour) associated with flex items that the table approach doesn't have (flex
,order
, etc).
– Adrift
Mar 16 '14 at 14:38
4
This example is so simple yet so effective, I needed exactly this for something I wanted to try, played around with it and the predictable happened, my eyes thank you for opening them :)
– SidOfc
Jan 29 '16 at 15:22
21
Flex is the best thing to happen to web development since the blink tag.
– Jonny Cook
May 23 '16 at 20:16
4
This fix should be the accepted answer!
– Automagisch
Mar 21 '17 at 11:06
|
show 15 more comments
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.
2
space-between
was exactly what I was looking for, thanks!
– Eddie Loeffen
Dec 30 '15 at 21:03
Borders disappear when using second suggestion, expected behaviour? codepen.io/oshihirii/pen/RygKRd
– user1063287
May 3 '18 at 3:42
add a comment |
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.
<div class="mainfiller">
<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>
<div class="mainfiller">
<div class="a"><a href="#">Home</a></div>
<div class="filler b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<style>
.main { display: flex; justify-content: space-between; }
.mainfiller{display: flex;}
.filler{flex-grow:1; text-align:center}
.a, .b, .c { background: yellow; border: 1px solid #999; }
</style>
2
Finally someone who understands flexbox
– Kokodoko
Aug 14 '17 at 12:05
6
@Kokodoko yeah, using one more non-semantic html element to move another element is the top of understanding flexbox...
– Zanshin13
Aug 14 '17 at 13:31
@Zanshin13 The other answers all write so much extra css that you might as well leave out the flex container and code the whole thing yourself :)
– Kokodoko
Aug 15 '17 at 14:12
2
@Kokodokojustify-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.
– Zanshin13
Aug 15 '17 at 15:01
1
what do you mean by so much css ?
– yacine benzmane
Jul 25 '18 at 9:04
add a comment |
Or you could just use justify-content: flex-end
.main { display: flex; }
.c { justify-content: flex-end; }
1
Thejustify-content
attribute is an attribute of the flex-container, see Chris Coyer's flexy cheatsheet: css-tricks.com/snippets/css/a-guide-to-flexbox
– Klaas van der Weij
Nov 8 '18 at 10:36
add a comment |
As easy as
.main { display: flex; flex-direction:row-reverse;}
add a comment |
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)
add a comment |
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>
For those who don't merely want to right align a single element, but may want to left align one element, and right align another (within the same flex layout) this is the way to go!
– Sensei James
Jan 10 at 19:55
add a comment |
I find that adding 'justify-content: flex-end' to the flex container solves the problem while 'justify-content: space-between' doesnt do anything.
add a comment |
'justify-content: flex-end' worked within price box container.
.price-box {
justify-content: flex-end;
}
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f22429003%2fhow-to-right-align-flex-item%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
10 Answers
10
active
oldest
votes
10 Answers
10
active
oldest
votes
active
oldest
votes
active
oldest
votes
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; }
<h2>With title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<!-- <div class="b"><a href="#">Some title centered</a></div> -->
<div class="c"><a href="#">Contact</a></div>
</div>
175
Orjustify-content: flex-end
– B T
Mar 17 '17 at 0:21
1
Try setting the width of .c to 300px. The title is no longer centered. So yes, this answers the question, but this breaks the design.
– Agamemnus
May 11 '17 at 0:03
11
Note that this doesn't always work the way you may expect, like when there's a.c::after
pseudo-element. In my experience,margin-left: auto;
is the way to go.
– Will
Nov 5 '17 at 4:06
5
Orflex-flow: row-reverse;
– jchook
Feb 9 '18 at 1:21
1
I don't see this being a correct answer if you wan't to align just one item in a flex container.
– Foxhoundn
Jan 22 at 0:01
add a comment |
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; }
<h2>With title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<!-- <div class="b"><a href="#">Some title centered</a></div> -->
<div class="c"><a href="#">Contact</a></div>
</div>
175
Orjustify-content: flex-end
– B T
Mar 17 '17 at 0:21
1
Try setting the width of .c to 300px. The title is no longer centered. So yes, this answers the question, but this breaks the design.
– Agamemnus
May 11 '17 at 0:03
11
Note that this doesn't always work the way you may expect, like when there's a.c::after
pseudo-element. In my experience,margin-left: auto;
is the way to go.
– Will
Nov 5 '17 at 4:06
5
Orflex-flow: row-reverse;
– jchook
Feb 9 '18 at 1:21
1
I don't see this being a correct answer if you wan't to align just one item in a flex container.
– Foxhoundn
Jan 22 at 0:01
add a comment |
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; }
<h2>With title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<!-- <div class="b"><a href="#">Some title centered</a></div> -->
<div class="c"><a href="#">Contact</a></div>
</div>
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; }
<h2>With title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<!-- <div class="b"><a href="#">Some title centered</a></div> -->
<div class="c"><a href="#">Contact</a></div>
</div>
.main {
display: flex;
justify-content: space-between;
}
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { text-align: center; }
<h2>With title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<!-- <div class="b"><a href="#">Some title centered</a></div> -->
<div class="c"><a href="#">Contact</a></div>
</div>
.main {
display: flex;
justify-content: space-between;
}
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { text-align: center; }
<h2>With title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<!-- <div class="b"><a href="#">Some title centered</a></div> -->
<div class="c"><a href="#">Contact</a></div>
</div>
answered Sep 15 '16 at 14:47
Kevin SuttleKevin Suttle
4,92932333
4,92932333
175
Orjustify-content: flex-end
– B T
Mar 17 '17 at 0:21
1
Try setting the width of .c to 300px. The title is no longer centered. So yes, this answers the question, but this breaks the design.
– Agamemnus
May 11 '17 at 0:03
11
Note that this doesn't always work the way you may expect, like when there's a.c::after
pseudo-element. In my experience,margin-left: auto;
is the way to go.
– Will
Nov 5 '17 at 4:06
5
Orflex-flow: row-reverse;
– jchook
Feb 9 '18 at 1:21
1
I don't see this being a correct answer if you wan't to align just one item in a flex container.
– Foxhoundn
Jan 22 at 0:01
add a comment |
175
Orjustify-content: flex-end
– B T
Mar 17 '17 at 0:21
1
Try setting the width of .c to 300px. The title is no longer centered. So yes, this answers the question, but this breaks the design.
– Agamemnus
May 11 '17 at 0:03
11
Note that this doesn't always work the way you may expect, like when there's a.c::after
pseudo-element. In my experience,margin-left: auto;
is the way to go.
– Will
Nov 5 '17 at 4:06
5
Orflex-flow: row-reverse;
– jchook
Feb 9 '18 at 1:21
1
I don't see this being a correct answer if you wan't to align just one item in a flex container.
– Foxhoundn
Jan 22 at 0:01
175
175
Or
justify-content: flex-end
– B T
Mar 17 '17 at 0:21
Or
justify-content: flex-end
– B T
Mar 17 '17 at 0:21
1
1
Try setting the width of .c to 300px. The title is no longer centered. So yes, this answers the question, but this breaks the design.
– Agamemnus
May 11 '17 at 0:03
Try setting the width of .c to 300px. The title is no longer centered. So yes, this answers the question, but this breaks the design.
– Agamemnus
May 11 '17 at 0:03
11
11
Note that this doesn't always work the way you may expect, like when there's a
.c::after
pseudo-element. In my experience, margin-left: auto;
is the way to go.– Will
Nov 5 '17 at 4:06
Note that this doesn't always work the way you may expect, like when there's a
.c::after
pseudo-element. In my experience, margin-left: auto;
is the way to go.– Will
Nov 5 '17 at 4:06
5
5
Or
flex-flow: row-reverse;
– jchook
Feb 9 '18 at 1:21
Or
flex-flow: row-reverse;
– jchook
Feb 9 '18 at 1:21
1
1
I don't see this being a correct answer if you wan't to align just one item in a flex container.
– Foxhoundn
Jan 22 at 0:01
I don't see this being a correct answer if you wan't to align just one item in a flex container.
– Foxhoundn
Jan 22 at 0:01
add a comment |
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;}
<h2>With title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<!--<div class="b"><a href="#">Some title centered</a></div>-->
<div class="c"><a href="#">Contact</a></div>
</div>
<h1>Problem</h1>
<p>Is there a more flexbox-ish way to right align "Contact" than to use position absolute?</p>
4
@MarkBoulder: For compatibility reasons his method is better, but if you're already using flexbox my answer would make more sense.
– Adrift
Mar 16 '14 at 11:46
4
@MarkBoulder: They both accomplish the same thing in this case. The advantage would be having other properties (and behaviour) associated with flex items that the table approach doesn't have (flex
,order
, etc).
– Adrift
Mar 16 '14 at 14:38
4
This example is so simple yet so effective, I needed exactly this for something I wanted to try, played around with it and the predictable happened, my eyes thank you for opening them :)
– SidOfc
Jan 29 '16 at 15:22
21
Flex is the best thing to happen to web development since the blink tag.
– Jonny Cook
May 23 '16 at 20:16
4
This fix should be the accepted answer!
– Automagisch
Mar 21 '17 at 11:06
|
show 15 more comments
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;}
<h2>With title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<!--<div class="b"><a href="#">Some title centered</a></div>-->
<div class="c"><a href="#">Contact</a></div>
</div>
<h1>Problem</h1>
<p>Is there a more flexbox-ish way to right align "Contact" than to use position absolute?</p>
4
@MarkBoulder: For compatibility reasons his method is better, but if you're already using flexbox my answer would make more sense.
– Adrift
Mar 16 '14 at 11:46
4
@MarkBoulder: They both accomplish the same thing in this case. The advantage would be having other properties (and behaviour) associated with flex items that the table approach doesn't have (flex
,order
, etc).
– Adrift
Mar 16 '14 at 14:38
4
This example is so simple yet so effective, I needed exactly this for something I wanted to try, played around with it and the predictable happened, my eyes thank you for opening them :)
– SidOfc
Jan 29 '16 at 15:22
21
Flex is the best thing to happen to web development since the blink tag.
– Jonny Cook
May 23 '16 at 20:16
4
This fix should be the accepted answer!
– Automagisch
Mar 21 '17 at 11:06
|
show 15 more comments
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;}
<h2>With title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<!--<div class="b"><a href="#">Some title centered</a></div>-->
<div class="c"><a href="#">Contact</a></div>
</div>
<h1>Problem</h1>
<p>Is there a more flexbox-ish way to right align "Contact" than to use position absolute?</p>
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;}
<h2>With title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<!--<div class="b"><a href="#">Some title centered</a></div>-->
<div class="c"><a href="#">Contact</a></div>
</div>
<h1>Problem</h1>
<p>Is there a more flexbox-ish way to right align "Contact" than to use position absolute?</p>
.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c {margin-left: auto;}
<h2>With title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<!--<div class="b"><a href="#">Some title centered</a></div>-->
<div class="c"><a href="#">Contact</a></div>
</div>
<h1>Problem</h1>
<p>Is there a more flexbox-ish way to right align "Contact" than to use position absolute?</p>
.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c {margin-left: auto;}
<h2>With title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<!--<div class="b"><a href="#">Some title centered</a></div>-->
<div class="c"><a href="#">Contact</a></div>
</div>
<h1>Problem</h1>
<p>Is there a more flexbox-ish way to right align "Contact" than to use position absolute?</p>
edited May 18 '18 at 12:12
Nitin Bisht
1,2601519
1,2601519
answered Mar 15 '14 at 21:17
AdriftAdrift
42.3k97281
42.3k97281
4
@MarkBoulder: For compatibility reasons his method is better, but if you're already using flexbox my answer would make more sense.
– Adrift
Mar 16 '14 at 11:46
4
@MarkBoulder: They both accomplish the same thing in this case. The advantage would be having other properties (and behaviour) associated with flex items that the table approach doesn't have (flex
,order
, etc).
– Adrift
Mar 16 '14 at 14:38
4
This example is so simple yet so effective, I needed exactly this for something I wanted to try, played around with it and the predictable happened, my eyes thank you for opening them :)
– SidOfc
Jan 29 '16 at 15:22
21
Flex is the best thing to happen to web development since the blink tag.
– Jonny Cook
May 23 '16 at 20:16
4
This fix should be the accepted answer!
– Automagisch
Mar 21 '17 at 11:06
|
show 15 more comments
4
@MarkBoulder: For compatibility reasons his method is better, but if you're already using flexbox my answer would make more sense.
– Adrift
Mar 16 '14 at 11:46
4
@MarkBoulder: They both accomplish the same thing in this case. The advantage would be having other properties (and behaviour) associated with flex items that the table approach doesn't have (flex
,order
, etc).
– Adrift
Mar 16 '14 at 14:38
4
This example is so simple yet so effective, I needed exactly this for something I wanted to try, played around with it and the predictable happened, my eyes thank you for opening them :)
– SidOfc
Jan 29 '16 at 15:22
21
Flex is the best thing to happen to web development since the blink tag.
– Jonny Cook
May 23 '16 at 20:16
4
This fix should be the accepted answer!
– Automagisch
Mar 21 '17 at 11:06
4
4
@MarkBoulder: For compatibility reasons his method is better, but if you're already using flexbox my answer would make more sense.
– Adrift
Mar 16 '14 at 11:46
@MarkBoulder: For compatibility reasons his method is better, but if you're already using flexbox my answer would make more sense.
– Adrift
Mar 16 '14 at 11:46
4
4
@MarkBoulder: They both accomplish the same thing in this case. The advantage would be having other properties (and behaviour) associated with flex items that the table approach doesn't have (
flex
, order
, etc).– Adrift
Mar 16 '14 at 14:38
@MarkBoulder: They both accomplish the same thing in this case. The advantage would be having other properties (and behaviour) associated with flex items that the table approach doesn't have (
flex
, order
, etc).– Adrift
Mar 16 '14 at 14:38
4
4
This example is so simple yet so effective, I needed exactly this for something I wanted to try, played around with it and the predictable happened, my eyes thank you for opening them :)
– SidOfc
Jan 29 '16 at 15:22
This example is so simple yet so effective, I needed exactly this for something I wanted to try, played around with it and the predictable happened, my eyes thank you for opening them :)
– SidOfc
Jan 29 '16 at 15:22
21
21
Flex is the best thing to happen to web development since the blink tag.
– Jonny Cook
May 23 '16 at 20:16
Flex is the best thing to happen to web development since the blink tag.
– Jonny Cook
May 23 '16 at 20:16
4
4
This fix should be the accepted answer!
– Automagisch
Mar 21 '17 at 11:06
This fix should be the accepted answer!
– Automagisch
Mar 21 '17 at 11:06
|
show 15 more comments
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.
2
space-between
was exactly what I was looking for, thanks!
– Eddie Loeffen
Dec 30 '15 at 21:03
Borders disappear when using second suggestion, expected behaviour? codepen.io/oshihirii/pen/RygKRd
– user1063287
May 3 '18 at 3:42
add a comment |
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.
2
space-between
was exactly what I was looking for, thanks!
– Eddie Loeffen
Dec 30 '15 at 21:03
Borders disappear when using second suggestion, expected behaviour? codepen.io/oshihirii/pen/RygKRd
– user1063287
May 3 '18 at 3:42
add a comment |
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.
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.
answered Sep 1 '15 at 13:51
Nick FNick F
6,26145170
6,26145170
2
space-between
was exactly what I was looking for, thanks!
– Eddie Loeffen
Dec 30 '15 at 21:03
Borders disappear when using second suggestion, expected behaviour? codepen.io/oshihirii/pen/RygKRd
– user1063287
May 3 '18 at 3:42
add a comment |
2
space-between
was exactly what I was looking for, thanks!
– Eddie Loeffen
Dec 30 '15 at 21:03
Borders disappear when using second suggestion, expected behaviour? codepen.io/oshihirii/pen/RygKRd
– user1063287
May 3 '18 at 3:42
2
2
space-between
was exactly what I was looking for, thanks!– Eddie Loeffen
Dec 30 '15 at 21:03
space-between
was exactly what I was looking for, thanks!– Eddie Loeffen
Dec 30 '15 at 21:03
Borders disappear when using second suggestion, expected behaviour? codepen.io/oshihirii/pen/RygKRd
– user1063287
May 3 '18 at 3:42
Borders disappear when using second suggestion, expected behaviour? codepen.io/oshihirii/pen/RygKRd
– user1063287
May 3 '18 at 3:42
add a comment |
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.
<div class="mainfiller">
<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>
<div class="mainfiller">
<div class="a"><a href="#">Home</a></div>
<div class="filler b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<style>
.main { display: flex; justify-content: space-between; }
.mainfiller{display: flex;}
.filler{flex-grow:1; text-align:center}
.a, .b, .c { background: yellow; border: 1px solid #999; }
</style>
2
Finally someone who understands flexbox
– Kokodoko
Aug 14 '17 at 12:05
6
@Kokodoko yeah, using one more non-semantic html element to move another element is the top of understanding flexbox...
– Zanshin13
Aug 14 '17 at 13:31
@Zanshin13 The other answers all write so much extra css that you might as well leave out the flex container and code the whole thing yourself :)
– Kokodoko
Aug 15 '17 at 14:12
2
@Kokodokojustify-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.
– Zanshin13
Aug 15 '17 at 15:01
1
what do you mean by so much css ?
– yacine benzmane
Jul 25 '18 at 9:04
add a comment |
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.
<div class="mainfiller">
<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>
<div class="mainfiller">
<div class="a"><a href="#">Home</a></div>
<div class="filler b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<style>
.main { display: flex; justify-content: space-between; }
.mainfiller{display: flex;}
.filler{flex-grow:1; text-align:center}
.a, .b, .c { background: yellow; border: 1px solid #999; }
</style>
2
Finally someone who understands flexbox
– Kokodoko
Aug 14 '17 at 12:05
6
@Kokodoko yeah, using one more non-semantic html element to move another element is the top of understanding flexbox...
– Zanshin13
Aug 14 '17 at 13:31
@Zanshin13 The other answers all write so much extra css that you might as well leave out the flex container and code the whole thing yourself :)
– Kokodoko
Aug 15 '17 at 14:12
2
@Kokodokojustify-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.
– Zanshin13
Aug 15 '17 at 15:01
1
what do you mean by so much css ?
– yacine benzmane
Jul 25 '18 at 9:04
add a comment |
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.
<div class="mainfiller">
<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>
<div class="mainfiller">
<div class="a"><a href="#">Home</a></div>
<div class="filler b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<style>
.main { display: flex; justify-content: space-between; }
.mainfiller{display: flex;}
.filler{flex-grow:1; text-align:center}
.a, .b, .c { background: yellow; border: 1px solid #999; }
</style>
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.
<div class="mainfiller">
<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>
<div class="mainfiller">
<div class="a"><a href="#">Home</a></div>
<div class="filler b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<style>
.main { display: flex; justify-content: space-between; }
.mainfiller{display: flex;}
.filler{flex-grow:1; text-align:center}
.a, .b, .c { background: yellow; border: 1px solid #999; }
</style>
<div class="mainfiller">
<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>
<div class="mainfiller">
<div class="a"><a href="#">Home</a></div>
<div class="filler b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<style>
.main { display: flex; justify-content: space-between; }
.mainfiller{display: flex;}
.filler{flex-grow:1; text-align:center}
.a, .b, .c { background: yellow; border: 1px solid #999; }
</style>
<div class="mainfiller">
<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>
<div class="mainfiller">
<div class="a"><a href="#">Home</a></div>
<div class="filler b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<style>
.main { display: flex; justify-content: space-between; }
.mainfiller{display: flex;}
.filler{flex-grow:1; text-align:center}
.a, .b, .c { background: yellow; border: 1px solid #999; }
</style>
edited Oct 3 '17 at 11:33
answered Dec 12 '16 at 19:28
ArnoArno
1,0001919
1,0001919
2
Finally someone who understands flexbox
– Kokodoko
Aug 14 '17 at 12:05
6
@Kokodoko yeah, using one more non-semantic html element to move another element is the top of understanding flexbox...
– Zanshin13
Aug 14 '17 at 13:31
@Zanshin13 The other answers all write so much extra css that you might as well leave out the flex container and code the whole thing yourself :)
– Kokodoko
Aug 15 '17 at 14:12
2
@Kokodokojustify-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.
– Zanshin13
Aug 15 '17 at 15:01
1
what do you mean by so much css ?
– yacine benzmane
Jul 25 '18 at 9:04
add a comment |
2
Finally someone who understands flexbox
– Kokodoko
Aug 14 '17 at 12:05
6
@Kokodoko yeah, using one more non-semantic html element to move another element is the top of understanding flexbox...
– Zanshin13
Aug 14 '17 at 13:31
@Zanshin13 The other answers all write so much extra css that you might as well leave out the flex container and code the whole thing yourself :)
– Kokodoko
Aug 15 '17 at 14:12
2
@Kokodokojustify-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.
– Zanshin13
Aug 15 '17 at 15:01
1
what do you mean by so much css ?
– yacine benzmane
Jul 25 '18 at 9:04
2
2
Finally someone who understands flexbox
– Kokodoko
Aug 14 '17 at 12:05
Finally someone who understands flexbox
– Kokodoko
Aug 14 '17 at 12:05
6
6
@Kokodoko yeah, using one more non-semantic html element to move another element is the top of understanding flexbox...
– Zanshin13
Aug 14 '17 at 13:31
@Kokodoko yeah, using one more non-semantic html element to move another element is the top of understanding flexbox...
– Zanshin13
Aug 14 '17 at 13:31
@Zanshin13 The other answers all write so much extra css that you might as well leave out the flex container and code the whole thing yourself :)
– Kokodoko
Aug 15 '17 at 14:12
@Zanshin13 The other answers all write so much extra css that you might as well leave out the flex container and code the whole thing yourself :)
– Kokodoko
Aug 15 '17 at 14:12
2
2
@Kokodoko
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.– Zanshin13
Aug 15 '17 at 15:01
@Kokodoko
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.– Zanshin13
Aug 15 '17 at 15:01
1
1
what do you mean by so much css ?
– yacine benzmane
Jul 25 '18 at 9:04
what do you mean by so much css ?
– yacine benzmane
Jul 25 '18 at 9:04
add a comment |
Or you could just use justify-content: flex-end
.main { display: flex; }
.c { justify-content: flex-end; }
1
Thejustify-content
attribute is an attribute of the flex-container, see Chris Coyer's flexy cheatsheet: css-tricks.com/snippets/css/a-guide-to-flexbox
– Klaas van der Weij
Nov 8 '18 at 10:36
add a comment |
Or you could just use justify-content: flex-end
.main { display: flex; }
.c { justify-content: flex-end; }
1
Thejustify-content
attribute is an attribute of the flex-container, see Chris Coyer's flexy cheatsheet: css-tricks.com/snippets/css/a-guide-to-flexbox
– Klaas van der Weij
Nov 8 '18 at 10:36
add a comment |
Or you could just use justify-content: flex-end
.main { display: flex; }
.c { justify-content: flex-end; }
Or you could just use justify-content: flex-end
.main { display: flex; }
.c { justify-content: flex-end; }
answered Mar 6 '18 at 11:04
MelchiaMelchia
7,54592963
7,54592963
1
Thejustify-content
attribute is an attribute of the flex-container, see Chris Coyer's flexy cheatsheet: css-tricks.com/snippets/css/a-guide-to-flexbox
– Klaas van der Weij
Nov 8 '18 at 10:36
add a comment |
1
Thejustify-content
attribute is an attribute of the flex-container, see Chris Coyer's flexy cheatsheet: css-tricks.com/snippets/css/a-guide-to-flexbox
– Klaas van der Weij
Nov 8 '18 at 10:36
1
1
The
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– Klaas van der Weij
Nov 8 '18 at 10:36
The
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– Klaas van der Weij
Nov 8 '18 at 10:36
add a comment |
As easy as
.main { display: flex; flex-direction:row-reverse;}
add a comment |
As easy as
.main { display: flex; flex-direction:row-reverse;}
add a comment |
As easy as
.main { display: flex; flex-direction:row-reverse;}
As easy as
.main { display: flex; flex-direction:row-reverse;}
answered Nov 16 '17 at 21:48
CESCOCESCO
3,48032946
3,48032946
add a comment |
add a comment |
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)
add a comment |
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)
add a comment |
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)
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)
answered Sep 28 '17 at 16:31
TetraDevTetraDev
7,39723243
7,39723243
add a comment |
add a comment |
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>
For those who don't merely want to right align a single element, but may want to left align one element, and right align another (within the same flex layout) this is the way to go!
– Sensei James
Jan 10 at 19:55
add a comment |
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>
For those who don't merely want to right align a single element, but may want to left align one element, and right align another (within the same flex layout) this is the way to go!
– Sensei James
Jan 10 at 19:55
add a comment |
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>
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>
answered Nov 15 '18 at 18:43
andreisrobandreisrob
43638
43638
For those who don't merely want to right align a single element, but may want to left align one element, and right align another (within the same flex layout) this is the way to go!
– Sensei James
Jan 10 at 19:55
add a comment |
For those who don't merely want to right align a single element, but may want to left align one element, and right align another (within the same flex layout) this is the way to go!
– Sensei James
Jan 10 at 19:55
For those who don't merely want to right align a single element, but may want to left align one element, and right align another (within the same flex layout) this is the way to go!
– Sensei James
Jan 10 at 19:55
For those who don't merely want to right align a single element, but may want to left align one element, and right align another (within the same flex layout) this is the way to go!
– Sensei James
Jan 10 at 19:55
add a comment |
I find that adding 'justify-content: flex-end' to the flex container solves the problem while 'justify-content: space-between' doesnt do anything.
add a comment |
I find that adding 'justify-content: flex-end' to the flex container solves the problem while 'justify-content: space-between' doesnt do anything.
add a comment |
I find that adding 'justify-content: flex-end' to the flex container solves the problem while 'justify-content: space-between' doesnt do anything.
I find that adding 'justify-content: flex-end' to the flex container solves the problem while 'justify-content: space-between' doesnt do anything.
answered Dec 27 '18 at 2:25
nightsnights
30528
30528
add a comment |
add a comment |
'justify-content: flex-end' worked within price box container.
.price-box {
justify-content: flex-end;
}
add a comment |
'justify-content: flex-end' worked within price box container.
.price-box {
justify-content: flex-end;
}
add a comment |
'justify-content: flex-end' worked within price box container.
.price-box {
justify-content: flex-end;
}
'justify-content: flex-end' worked within price box container.
.price-box {
justify-content: flex-end;
}
answered 12 hours ago
Mohammad AdeelMohammad Adeel
12
12
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f22429003%2fhow-to-right-align-flex-item%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
you can use float right, but it's the same way...! The best way is to use a display table with text-align.
– Yohann Tilotti
Mar 15 '14 at 20:08
Sure, if that's better. Still having trouble right-aligning "Contact" though: jsfiddle.net/vqDK9/1
– Mark Boulder
Mar 15 '14 at 20:27
1
I updated your fiddle jsfiddle.net/vqDK9/2
– Yohann Tilotti
Mar 15 '14 at 20:33
Here are at least two ways to do it: stackoverflow.com/a/33856609/3597276
– Michael_B
Jan 8 '16 at 12:08