Back to post: Flexible Box Layout Module
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.
.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;}
.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.
.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.
.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.
.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.