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/
1

3 Answers 3

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/

1
  • This solution creates two rows whereas I think the original question desires a single row (of green) EDIT* I was on safari* Aug 24, 2015 at 21:52
0

Try this..

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

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

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/

3
  • This solution works on safari not on chrome, the solution above this seems to work on chrome but not on safari.. Aug 24, 2015 at 21:59
  • Merging our answers works on both browsers, edited in Aug 24, 2015 at 22:01
  • Are you sure there is not an easier way?
    – Altaula
    Aug 24, 2015 at 22:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.