Basic Flex Layout

Posted on

in

,

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

About me

Mark Wong is a front end developer with 10+ years experience. Most of his knowledge of HTML5, CSS and Js is self taught.

Calendar

April 2024
M T W T F S S
1234567
891011121314
15161718192021
22232425262728
2930