Display: flex Flex-direction: row | row-reverse | column | column-reverse align-self: flex-start | flex-end | center | baseline | stretch justify-content: start | center | space-between | space-around | space-evenly
.item { align-self:flex-start | flex-end | center | baseline | stretch; }
.container { display: flex; } Anything within the container that is a block level element is now turned into an inline element only taking up the space of its actual content placing all items side by side instead on individual rows.
<div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div> <style> .flex-container { display: flex; // default: flow flex-direction: column; // elements in a column } </style>