2

How can I move yellow item to right?

  1. float have no effect
  2. align-self does not work

Result

HTML

<div class="flex">
    <div class="item">A</div>
    <div class="item">B</div>
</div>

CSS

.flex {
    background: green;
    display: flex;
}

.flex .item:first-child {
    background: red;
}

.flex .item:last-child {
    background: yellow;
}
  1. https://jsfiddle.net/cd6j4y13/
  2. https://jsfiddle.net/cd6j4y13/embedded/result/
Altaula
  • 751
  • 1
  • 7
  • 21

3 Answers3

4

You can add margin-left:auto to .flex .item:last-child

.flex {
    background: green;
    display: flex;
}

.flex .item:first-child {
    background: red;
}

.flex .item:last-child {
    background: yellow;
    margin-left:auto;
}

JSFiddle: https://jsfiddle.net/cd6j4y13/1/

LTasty
  • 1,997
  • 12
  • 21
  • This solution creates two rows whereas I think the original question desires a single row (of green) EDIT* I was on safari* – Alexei Darmin Aug 24 '15 at 21:52
0

https://jsfiddle.net/cd6j4y13/2/

float:left to first child

float:right to last child

overflow:auto to parent

Seems to do the trick.

Edit* The above works only on safari, as the other answer points out adding margin-left:auto to last:child works elsewhere

https://jsfiddle.net/cd6j4y13/4/

Alexei Darmin
  • 2,009
  • 1
  • 16
  • 29
0

Try this..

.flex {
    justify-content: space-between;
}

Here is the updated JSFiddle: https://jsfiddle.net/cd6j4y13/5/

Joaquín O
  • 1,433
  • 1
  • 9
  • 16