Flexbox properties: 1.flex-direction 2.flex-wrap 3.flex-flow 4.justify-content 5.align-items 6.align-content
.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.
.container { display: flex; flex-wrap: wrap; justify-content: space-between; } .item { width: 32%; padding-bottom: 32%; /* Same as width, sets height */ margin-bottom: 2%; /* (100-32*3)/2 */ position: relative; }