flexible boxes


What Is CSS Flexible Box Layout?


CSS 2.1 defined four layout modes — block, inline, table, and absolutely positioned.
This module introduces a new layout mode, flex layout, which is designed for laying out more complex applications and webpages.


http://www.w3.org/TR/css3-flexbox/

WHAT IS CSS FLEXIBLE BOX LAYOUT?

What is Flex-Box good for?

  • Filling Space
  • Stacking
  • Re-positioning
  • Wrapping

Flexibility


Take this example layout 


Flexibility

We can tell child 3 to expand 
to fill the remaining space

Flexibility

Or tell children 2 and 3 to play nice
and share the remaining space!

Why would we use it?

  • Adaptive stretching designs
  • Variably sized content
  • Multi-column layouts
  • It's Cool!

Terminology


Flex Container: a parent container element 

Flex Item: a child element with CSS flex properties

Cross Axis: the axis opposite the stacking axis
(eg, vertical if we are stacking horizontally)

Collapsing: a Flex Item can be made invisible
without disrupting the container's Cross Axis size

Implementations

There are at least 3 versions out there

/* OLD - (W3C Working Draft, July 2009) */
display: -webkit-box;      /* iOS 6-, Safari 3.1-6 */
display: -moz-box;         /* Firefox 19- (buggy but mostly works) */
        

/* IN-BETWEEN - (W3C Working Draft, March 2012) */
display: -ms-flexbox;      /*  IE 10 */
        

/* CURRENT W3C Candidate Recommendation Sept 2012 */
display: -webkit-flex;  /* Chrome */   
display: flex;          /* Opera 12.1, Firefox 20+ */

Implementations

You can build a stack that is cross-compatible
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: start;
-moz-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;

Wizards to help


http://the-echoplex.net/flexyboxes/

http://demo.agektmr.com/flexbox/

Resources


  • http://css-tricks.com/old-flexbox-and-new-flexbox/
  • http://css-tricks.com/using-flexbox/
  • http://www.w3.org/TR/css3-flexbox/
  • http://dev.w3.org/csswg/css-flexbox/
  • http://www.html5rocks.com/en/tutorials/flexbox/quick/
  • http://weblog.bocoup.com/dive-into-flexbox/
  • http://dev.opera.com/articles/view/flexbox-basics/

Have Fun!


Made with Slides.com