This site is a great reference to flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background

Below I have a basic 2 column centered layout. The basics are:

The body:

display: flex;
min-height:100%;
align-items: center;
justify-content: center;

The important part is to not set it’s height to 100% otherwise if the window is shorter than the content, you won’t be able to scroll to the top or bottom.

The container:

display:flex;
justify-content: space-evenly;
align-items: center;

Similar to the body. justify-content is for horizontally aligning while align-items is for vertically aligning.

The columns:

flex-basis: 45%;

This makes the columns the same width. Link to the example is here.