CSS Flexible Box Layout Module Level 1 Sallie Goetsch • WP Fangirl • wpfangirl.com https://www.w3.org/TR/css-flexbox-1/ The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.
Flexbox makes your browser calculate how many items fit across the screen, how wide each one should be, and where to put them. Sallie Goetsch • WP Fangirl • wpfangirl.com
• wrap Items will wrap into multiple rows when there are too many to fit on one line. • nowrap Items will shrink as far as possible. Content may overflow. Sallie Goetsch • WP Fangirl • wpfangirl.com
• Positions the individual item perpendicular to flex- direction, irrespective of the align-items property on the flex container. • Takes the same arguments as align-items Sallie Goetsch • WP Fangirl • wpfangirl.com
• A Complete Guide to Flexbox • Flexbox Froggy • Ultimate Flexbox Cheat Sheet • What the Flexbox? • Smashing Book 5: Real Life Responsive Web Design Sallie Goetsch • WP Fangirl • wpfangirl.com
wpfangirl
cyberagentdevelopers
uxaustralia
stephaniewalter
kenjiclown5
shoty_k2
miure
uxevents
siteengine
hjmkth
yeseniaperezcruz
shpigford
geeforr
scottboms
ddemaree
chriscoyier
hursman
revolveconf
keathley
roundedbygravity
michaelherold
brad_frost