Flex-start and flex-end in one line
For the main axis, and with the default flex direction row
, you should use the new auto margins, e.g. margin-left: auto
.
Edit: And it appears that react now also support auto-margins: github-link
body > div {
display: flex;
border: 1px solid red;
}
div div {
padding: 10px;
background: lightgray;
}
div div:nth-child(3) {
margin-left: auto;
}
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
And like this for the cross axis, using the align-*
properties, e.g. align-self
.
body > div {
display: flex;
border: 1px solid red;
align-items: flex-start;
height: 100px;
}
div div {
padding: 10px;
background: lightgray;
}
div div:nth-child(3),
div div:nth-child(4) {
align-self: flex-end;
}
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Use a separator element to split:
.container {
display: flex;
flex-direction: row;
}
.item {
display: flex;
flex-shrink: 0;
}
.divider {
display: flex;
flex: 1;
}
<div class=container>
<div class=item>
<div>Left One</div>
</div>
<div class=divider></div>
<div class=item>
<div>Right One</div>
</div>
</div>
Please avoid using margin: auto
to flex boxes. This may not be supported by some native solutions such as react native
.