Simple Flexbox Example

Column One


This page shows how to arrange content into columns of unequal width.

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. The first two quite narrow and the third one wider.

Column Two


To see how this is done: right click on the page and choose 'View Page Source'. The key code is in the styles of the article tag, near the top of the page.

Column Three


Inside our <section> we put our three items. Each one is inside an <article> 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.