Back to post: Flexible Box Layout Module

Flexbox Demo

Below are some experiments with the css flexible layout module. I'm using the latest spec (Oct, 2012) and as I write this these demos will only work using the Chrome browser. Hopefully other browser will soon follow.

In all of the examples the container has a max-width of 60em and a height of 20em. The items within have a width of 175px and a height of 10em. Additional css used for each is displayed below each example.

Example 1

flexbox item 1

flexbox item 2

flexbox item 3

.container1 {
  display: -webkit-flex;
  -webkit-flex-direction: row;
  -webkit-flex-wrap: wrap;
  -webkit-justify-content: space-around;
  -webkit-align-items: center;
}

#flexbox1 {
  -webkit-order: 2;
  -webkit-flex-grow: 1;
  -webkit-flex-shrink: 1;}

#flexbox2 {
  -webkit-order: 3;
  -webkit-flex-grow: 1;
  -webkit-flex-shrink: 1;}

#flexbox3 {
  -webkit-order: 1;
  -webkit-flex-grow: 2;
  -webkit-flex-shrink: 2;}

Example 2

flexbox item 4

flexbox item 5

flexbox item 6

.container2 {
  display: -webkit-flex;
  -webkit-flex-direction: row-reverse;
  -webkit-flex-wrap: wrap;
  -webkit-justify-content: space-around;
  -webkit-align-items: center;
}

Nothing is specifically set on the flexbox items here. I wanted to see how row-reverse and space-around worked. It's also nice how easy it is to vertically center the flexbox items.

Example 3

flexbox item 7

flexbox item 8

flexbox item 9

.container3 {
  height: 40em;
  display: -webkit-flex;
  -webkit-flex-direction: column;
  -webkit-flex-wrap: wrap;
  -webkit-justify-content: center;
  -webkit-align-items: baseline;
}

#flexbox 8 {-webkit-align-self: flex-end;}

In this example I set the direction to column and doubled the height of the container. I also decided to experiment with overriding align-self, but setting align-item to flex-end on flexbox item 8.

Example 4

flexbox item 10

flexbox item 11

flexbox item 12

.container4 {
  height: 25em;
  display: -webkit-flex;
  -webkit-flex-direction: row;
  -webkit-flex-wrap: wrap;
  -webkit-justify-content: center;
  -webkit-align-items: baseline;
}

In this example I increased the width of all the flexbox items to 40% to force one to drop below the others. I was curious to see how the flexbox items behave when they wrap. I was expecting flexbox 12 to sit directly below the other 2 flexboxes. I'm not sure where the vertical space between them comes from.

Example 5

flexbox item 13

flexbox item 14

flexbox item 15

.container4 {
  display: -webkit-flex;
  -webkit-flex-direction: column-reverse;
  -webkit-flex-wrap: nowrap;
  -webkit-justify-content: flex-end;
  -webkit-align-items: stretch;
}

In this last example I wanted to see what would happen when the container is set to nowrap. As you can see one of the flexbox items extends past the container. Because I set the direction to column-reverse, it's actually the first flexbox that extends outside the container.