CSS3 Flexbox Layout Module can be used for the layout of a webpage.
There are several techniques that are available with CSS3.
One method for layout is ‘flex‘.
Take a look at the code below because it contains three sections that each contain a ‘h2’ heading, an article with a ‘h3’ heading and one paragraph.
The browser will render this content vertically. This is called the default behaviour.

CSS3 Flexbox Layout Module, browser default settings.
To change this to a horizontal layout we can select the ‘main’ tag to add some css3 styles.
On line 13 we have added a ‘display’ attribute with a ‘flex’ value.
On line 14 we have added a ‘justify-content’ attribute with a ‘space-between’ value.

Test in your browser to see the results?
It should look similar to the screenshot below.

CSS3 Flexbox Layout Module

CSS3 Flexbox Layout Module

In the above example a the parent container ‘main’ has been given a display property with the value of ‘flex‘. Next in the parent container another property, the ‘justify-content‘ property, has been given the value of ‘space-between‘.
The ‘justify-content’ property can take either of the following 5 values:

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around

The following example better demonstrates how items are arranged using display: flex; in the parent container.

On line 9 the ‘main’ container has been given the display property with a value of ‘flex’. The width and height properties are set as 500px and 250px respectively on lines 10 and 11. On line 12 the background-color property is given a ‘lightGray’ value.

On line 29 the ‘main‘ element is the container for four ‘section’ items. Back on line 14 the ‘section’ selector is set with the margin property on line 15 and given a 20 pixel value. The width and height properties are each given a value of 100 pixels on lines 16 and 17. On line 18 the ‘background-color’ property is given a red ‘value’. Essentially the ‘main’ element is a big grey box and it holds four ‘section’ elements which are smaller square red boxes.

CSS3 Flexbox Layout Module. Flex container with four items.
A grey container with four red items.

CSS3 logo. CSS3 Flexbox Layout Module

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

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