CSS3 FlexBox

CSS3 - Webkit - Flexible Box Layout

[ All examples are shown for Webkit. This will work for Safari (ipad/iphone) and Chrome (android). The new Amazon Silk browser will also be Webkit based.

You can replace -webkit- with the -moz- prefix for Firefox.]

We have a container element and we want to control the position of the items in the container. The Flex Box set of properties describe how to arrange the items in the containter and what to do with any extra space.

But the specification for the Flexible Box Model is undergoing a big change in terminology right now, so it makes sense to wait until the specification is settled. But regardless of the terminology changes, the basic functions will be the same.

LQWebdesign will keep you updated on the changes.

Let's start with a simple markup for three boxes in a container:

<div id="boxgroup"> 
  <p class="boxes">Now is the time for all good men to come to the aid of their country.</p> 
  <p class="boxes">The quick brown fox jumped over the lazy dog. </p> 
  <p class="boxes">Mary has a little lamb, its fleece was white as snow.</p> 
</div>

Now is the time for all good men to come to the aid of their country.

The quick brown fox jumped over the lazy dog.

Mary has a little lamb, its fleece was white as snow.

Here is the CSS for this example:

#boxgroup {
  width: 400px;
  padding: 5px;
  background-color: lightgrey;
  border: 1px single black;
} 
.boxes {
   width: 150px;
   border: 5px inset #cc0000;
   color: blue;
   padding: 5px;
   background-color: white;
}

The container element is #boxgroup.. There is nothing in the CSS for this element that says anything about what to do with any child elements.

display: -webkit-box

Defining the container as a display: -webkit-box will cause the child elements in this container to follow any Flex Box layout rules assigned.

If we add display: -webkit-box; to the boxgroup element, the child boxes will be arranged horizontally. Horizontal is the default orientation for -webkit-box.

#boxgroup {
  display: -webkit-box; 
  width: 400px;
  padding: 5px;
  background-color: lightgrey;
  border: 1px single black;
}

Here is what the result looks like:

Now is the time for all good men to come to the aid of their country.

The quick brown fox jumped over the lazy dog.

Mary has a little lamb, its fleece was white as snow.

The three containers are arranged horizontally in the container. (Which is the default).

Notice that there is some overlap on the right side of the container. Three boxes with a width of 150px each, plus margins and padding, will overflow the 400px container.

The next page discusses some solutions for this.

The height of the container adapts to the size of the boxes, which is determined by the amount of text in the box.

1 | 2 | Next Page