Flexbox: Centering and Flex Items
Learn how to achieve perfect centering and work with flex items.
How to achieve perfect centering
Achieving perfect centering is quite simple with Flexbox! We simply need to ensure that both the justify-content and align-items properties are set to the center value:
Child elements (flex items)
Let’s take a look at the set of properties we can apply to child elements. These are our flex items. Any direct child elements of a flex container automatically become flex items.
<div class="flex-container"><div>1</div><div>2</div><div>3</div><div>4</div></div>
The four orange boxes shown in the figure above are our flex items because they’re ...