html - CSS-自我对齐问题

如何将黄色项目移到右边？


float无效
align-self不起作用




的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;
}

https://jsfiddle.net/cd6j4y13/
https://jsfiddle.net/cd6j4y13/embedded/result/

最佳答案

尝试这个..

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

这是更新的JSFiddle：https://jsfiddle.net/cd6j4y13/5/