CSS3 Flex: Pull child to the right

Simple fix, use an auto-adjusting margin:

ul li:last-child {
    margin-left: auto;
}

You may also want to not use width: 100% so that the element stays inside the visible area:

ul {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    align-items: center;
    /* width: 100%; */
    height: 100px;
    background: #333;
    padding: 15px;
}

http://jsfiddle.net/dwLHE/

See also https://www.w3.org/TR/css-flexbox-1/#auto-margins

CSS3 Flex: Pull child to the right

Related

Recent Posts