Reputation: 24798
https://jsfiddle.net/vhem8scs/
Is it possible to have two items align left and one item align right with flexbox? The link shows it more clearly. The last example is what I want to achieve.
In flexbox I have one block of code. With float I have four blocks of code. That is one reason why I prefer flexbox.
HTML
<div class="wrap">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
<!-- DESIRED RESULT -->
<div class="result">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
CSS
.wrap {
display: flex;
background: #ccc;
width: 100%;
justify-content: space-between;
}
.result {
background: #ccc;
margin-top: 20px;
}
.result:after {
content: '';
display: table;
clear: both;
}
.result div {
float: left;
}
.result div:last-child {
float: right;
}
Upvotes: 451
Views: 454032
Reputation: 371
You should be able to use "align-self" on individual items to override the "align-items" status of the container.
Upvotes: 1
Reputation: 1
For guys who have their items centered and want to put their last to the right, here is the solution:
header
to flex
and justify-content
to centered
margin: auto;
margin-left: auto;
Upvotes: 0
Reputation: 147
You can do either
margin-left: auto;
or
position absolute;
right: 0px;
This will move the item to the right side. The px value you give will push the item from the right to the left.
Upvotes: 13
Reputation: 9185
Here is what I did (with tailwind but it's just CSS):
<nav class="border-b border-black flex">
<div class="border border-red-600 w-12">Back</div>
<div class="border border-blue-600 w-12">Logo</div>
<div class="border border-green-600 flex-grow text-center">Socializus</div>
<div class="border border-orange-600 w-24">
<div class="w-12 ml-auto border border-pink-600">Menu</div>
</div>
</nav>
The idea is that the two parts on left and right are the same width, then a subpart of the right takes less space
Upvotes: -2
Reputation: 101
To align some elements (headerElement) in the center and the last element to the right (headerEnd).
.headerElement {
margin-right: 5%;
margin-left: 5%;
}
.headerEnd{
margin-left: auto;
}
Upvotes: 10
Reputation: 1130
For a terse, pure flexbox option, group the left-aligned items and the right-aligned items:
<div class="wrap">
<div>
<span>One</span>
<span>Two</span>
</div>
<div>Three</div>
</div>
and use space-between
:
.wrap {
display: flex;
background: #ccc;
justify-content: space-between;
}
This way you can group multiple items to the right(or just one).
https://jsfiddle.net/c9mkewwv/3/
Upvotes: 85
Reputation: 125641
To align one flex child to the right set it withmargin-left: auto;
From the flex spec:
One use of auto margins in the main axis is to separate flex items into distinct "groups". The following example shows how to use this to reproduce a common UI pattern - a single bar of actions with some aligned on the left and others aligned on the right.
.wrap div:last-child {
margin-left: auto;
}
.wrap {
display: flex;
background: #ccc;
width: 100%;
justify-content: space-between;
}
.wrap div:last-child {
margin-left: auto;
}
.result {
background: #ccc;
margin-top: 20px;
}
.result:after {
content: '';
display: table;
clear: both;
}
.result div {
float: left;
}
.result div:last-child {
float: right;
}
<div class="wrap">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
<!-- DESIRED RESULT -->
<div class="result">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
Note:
You could achieve a similar effect by setting flex-grow:1 on the middle flex item (or shorthand flex:1
) which would push the last item all the way to the right. (Demo)
The obvious difference however is that the middle item becomes bigger than it may need to be. Add a border to the flex items to see the difference.
.wrap {
display: flex;
background: #ccc;
width: 100%;
justify-content: space-between;
}
.wrap div {
border: 3px solid tomato;
}
.margin div:last-child {
margin-left: auto;
}
.grow div:nth-child(2) {
flex: 1;
}
.result {
background: #ccc;
margin-top: 20px;
}
.result:after {
content: '';
display: table;
clear: both;
}
.result div {
float: left;
}
.result div:last-child {
float: right;
}
<div class="wrap margin">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
<div class="wrap grow">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
<!-- DESIRED RESULT -->
<div class="result">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
Upvotes: 982