Simple Flexbox Example

Column One


We are going to learn an easy way to layout a web page.

A word you need to know: everything you put on your page is called the content.

Step one is to decide how you want to arrange the content. Let's say we want to have three columns going down the page.

Column Two


There needs to be something which contains your content. A good example of a tag to use is <article> We set this container's style to display: flex.

Column Three


Inside our <article> we put our three items. Each one is inside an <section> tag. These three articles will share out the space available.

We can style the articles. Some useful properties to know about are padding, margin and background.