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
  • 774
  • 1
  • 7
  • 22

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
  • 2,008
  • 14
  • 22
  • 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,079
  • 1
  • 18
  • 30
0

Try this..

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

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

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