TipueLondon

Home

jQuery

CSS

HTML5

Other

Support

Shop

About & Contact

Playing around with Flexbox

Playing around with the CSS Flexbox model

Playing around with Flexbox

13th July, 2015
The CSS3 Flexible Box Layout Module, aka Flexbox, aims to provide a CSS box model for user interface design. There's plenty of Flexbox tutorials out there, but we thought we'd play around and see what happens.

A Flexbox example, basic

First some basic stuff. Five boxes in a Flexbox container, flowing from left to right.
CSS
HTML
Example

See the Pen A Flexbox example, basic by Steve Pear () on CodePen.

The flex-flow shorthand property sets flex-direction to the value row and flex-wrap to the value wrap.

Flexbox, spaced out

Again, five boxes in a container. The boxes grow but never shrink below the width property set in the .item class.
CSS
HTML
Example

See the Pen Flexbox, spaced out by Steve Pear () on CodePen.

The flex shorthand property sets flex-grow and flex-shrink to 1.

Flexbox, big third

Three boxes, the third fixed to the right and the height set to the viewport. At a width of 670 pixels and below the third box behaves as a regular box.
CSS
HTML
Example

See the Pen Flexbox, big three by Steve Pear () on CodePen.

The CSS3 media query resets the values in the .three class to the same as those in the .item class.

Flexbox, big third, third gone

Three boxes, the third fixed to the right and the height set to the viewport. At a width of 670 pixels and below the third box disappears.
CSS
HTML
Example

See the Pen Flexbox, big third, third gone by Steve Pear () on CodePen.

Flexbox, div centered

This centers a div both horizontally and vertically.
CSS
HTML
Example

See the Pen Flexbox, div centered by Steve Pear () on CodePen.

The height property in the container can be anything, as long as it's larger than the centered div.

Flexbox, flexible footer

A footer that sticks to the bottom of the page. Using this Flexbox method the footer can be any height.
CSS
HTML
Example

See the Pen Flexbox, flexible footer by Steve Pear () on CodePen.

Browser compatibility

Flexbox is fully-supported by Chrome 38+, IE11 and Microsoft Edge, Firefox 38+, Safari 9+, Opera 30+, iOS Safari 9+ and Android Browser 40+. Flexbox has support with the -webkit- browser prefix in Safari 8 and iOS Safari 8.3.
© 2016, Tipue. Made in London.
About   Privacy   T&Cs