Flexbox properties: 1.flex-direction 2.flex-wrap 3.flex-flow 4.justify-content 5.align-items 6.align-content
div { display: flex; align-items: center; justify-content: space-around; }
/* use this if you want to center stuff like in your div */ .flexbox_card { display: flex; flex-wrap: wrap; justify-content: center; }
.container { align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe; }
.container { justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe; }
.container { flex-flow: column wrap; }
.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.