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:
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.
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.
This makes the columns the same width. Link to the example is here.