CSS Tricks Flexbox Guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Using flexbox on an actual website requires a bit of know-how in regards to how elements with display: flex interact with sub-flex properties such as justify-content and align-items.

When used with display: flex, properties like justify-content and align-items determine how an element's children are laid out within a div. For instance, let's say we had the following markup:

<section>
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</section>

By default, div tags have a display of block meaning they take up the full width of their parent container, and are stacked on top of each other like blocks. But let's say we wanted to keep our structure as is, yet move the div elements so that they're placed directly next to each other on the x-axis, rather than being stacked like blocks.

To do this, we could add a display: flex style to the divs' parent: the section tag.

<section style="display: flex">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</section>

Just with the parent tag having display: flex all of the children block elements will be placed next to eachother, only taking up the exact amount of space of the content within them.

Since the section tag has display: flex, you can begin adding on the sub-flex properties I mentioned earlier such as justify-content and align-items. These two properties only work if used with an element that has display: flex, so make sure you double check that you've met that requirement when applying the two properties.

Justify Content

The justify-content property determines how a flex element's children are spaced out across its horizontal axis. By setting equal to a value such as space-between, justify-content will effectively space out all children elements with an even amount of spacing in between them.

Another popular justify-content value is center, which will center all flex children horizontally, in the middle of whatever container flex and justify-content are applied to.

Align Items

The align-items property determines how flex children are laid out on the vertical axis of a flex container. The most common value you'll use for this property is center. It's a long-running joke on how impossible it is to center a div vertically using HTML and CSS, but with flex and align-items: center, this joke becomes a thing of the past as those two properties will give you the exact effect you need to ensure all of your flex children are perfectly aligned in the center of their parent container.