css flex box modellearning-html5.info/wow_aug_feb_2011_cssflexbox.pdf · 2012-02-08 · overview...

CSS FLEX BOX MODELMark DuBoisMark DuBois – Mark@WebProfessionals.org

Not the box model• This has been supported in browsers for some time

Work in Progresshttp://dev.w3.org/csswg/css3-flexbox/

Overview• display:flexbox or display:inline-flexbox in CSS

• Layout agnostic• Block layout biased towards vertical• Inline layout biased towards horizontal• Main axis indicates direction (from main-start to main-end)• Axis perpendicular to main axis is called cross axis

Not ready for “prime time”• http://html5please.us/

• http://caniuse.com/

Starting Fileshttp://markdubois.me/FlexBox

Download, unpack locally. Open FB_Ex1_Start.html

Initial code• HTML

• CSS

Let’s experiment• FB_Ex1_Start.html (examine code)

• Modify box-orient:vertical; box-pack:center; box-align:center (don’t forget browser prefixes)

Let’s experiment (2)• Modify with

box-orient:vertical;box-pack:center;box-align:center (don’t forget browser prefixes)

Don’t forgetto try variousbrowsers!

Now that we have starting files…• Let’s use some online tools to get more CSS code and

experiment

• http://css3clickchart.com/#flexbox• Next slide (try out online then copy and paste into

your local example)

• http://flexiejs.com/• Online playground – second slide

Experimental• http://css3clickchart.com/#flexbox

Tools• http://flexiejs.com/• http://flexiejs.com/playground/?random (Experiment)

Tutorials• http://markdubois.me/FlexBox1

Tutorials (2)• http://markdubois.me/FlexBox2

Questions?• Be gentle!

• Mark@WebProfessionals.org

• @Mark_DuBois

• Slides - http://markdubois.me/FlexBoxSlides