CSS FLEX BOX MODELMark DuBoisMark DuBois – [email protected]
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_DuBois
• Slides - http://markdubois.me/FlexBoxSlides