Flexible Box Module Layout Examples

These examples are from the HTMLRockstars post, "Working with the Flexible Box Layout Module (CSS3)"."

Example One

1
2
3

This example uses the default box-flex value. While the examples (all of them) use a set width, this is not necessary, it simply makes things easier to illustrate.

Example Two

1
2
3

This example has all .child boxes set to box-flex: 1; creating equally sized boxes

Example Three

1
2
3

In this example the first .child is inflexible while .child2 has a box-flex value of 1 while .child3 has a box-flex value of 2 making it more flexible than .child2.

Example Four

1
2
3
3

In this example you can see that boxes scale in height to match their siblings. This is the default behavior (box-align: stretch).

Example Five

1
2
3
3

In this example you can also see that boxes scale in height to match their siblings, however they start from the bottom of the container using box-align: end;

Example Six

1
2
3
3

In this example you can also see that boxes scale in height to match their siblings, however they do not stretch to match the height of their siblings, to do this we set box-align: start;

Example Seven

1
2
2
3

In this example we've set box-align: center on the parent.

Example Eight

1
2
2
3

In this example we've set box-align: center and altered the box-flex of .child3 to a value of '2'.

Example Nine

1
2
2
3

In this example we've set box-align: center and altered the box-flex of .child3 to a value of '2' and .child one to a value of '1' while .child2 remains inflexible.

Example Ten

1
2
3

One of my personal favorites, reversing the display order using box-direction: reverse on the parent container.