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;
}
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 {_x000D_
display: flex;_x000D_
background: #ccc;_x000D_
width: 100%;_x000D_
justify-content: space-between;_x000D_
}_x000D_
.wrap div:last-child {_x000D_
margin-left: auto;_x000D_
}_x000D_
.result {_x000D_
background: #ccc;_x000D_
margin-top: 20px;_x000D_
}_x000D_
.result:after {_x000D_
content: '';_x000D_
display: table;_x000D_
clear: both;_x000D_
}_x000D_
.result div {_x000D_
float: left;_x000D_
}_x000D_
.result div:last-child {_x000D_
float: right;_x000D_
}<div class="wrap">_x000D_
<div>One</div>_x000D_
<div>Two</div>_x000D_
<div>Three</div>_x000D_
</div>_x000D_
_x000D_
<!-- DESIRED RESULT -->_x000D_
<div class="result">_x000D_
<div>One</div>_x000D_
<div>Two</div>_x000D_
<div>Three</div>_x000D_
</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 {_x000D_
display: flex;_x000D_
background: #ccc;_x000D_
width: 100%;_x000D_
justify-content: space-between;_x000D_
}_x000D_
.wrap div {_x000D_
border: 3px solid tomato;_x000D_
}_x000D_
.margin div:last-child {_x000D_
margin-left: auto;_x000D_
}_x000D_
.grow div:nth-child(2) {_x000D_
flex: 1;_x000D_
}_x000D_
.result {_x000D_
background: #ccc;_x000D_
margin-top: 20px;_x000D_
}_x000D_
.result:after {_x000D_
content: '';_x000D_
display: table;_x000D_
clear: both;_x000D_
}_x000D_
.result div {_x000D_
float: left;_x000D_
}_x000D_
.result div:last-child {_x000D_
float: right;_x000D_
}<div class="wrap margin">_x000D_
<div>One</div>_x000D_
<div>Two</div>_x000D_
<div>Three</div>_x000D_
</div>_x000D_
_x000D_
<div class="wrap grow">_x000D_
<div>One</div>_x000D_
<div>Two</div>_x000D_
<div>Three</div>_x000D_
</div>_x000D_
_x000D_
<!-- DESIRED RESULT -->_x000D_
<div class="result">_x000D_
<div>One</div>_x000D_
<div>Two</div>_x000D_
<div>Three</div>_x000D_
</div>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).
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;
}
Source: Stackoverflow.com