Examples:
CSS Flexbox Please!
Solved By Flexbox — Cleaner, hack-free CSS
Intro Guide:
Dive into Flexbox
Using the CSS3 flexbox layout
A Guide to Flexbox
弹性框布局
Further Reading:
W3C Last Call Working Draft, 25 September 2014
Browser Compatibility & Some Outdated Stuff:
Flexbox / Flexible Box Layout Browser Support
Working with flexbox: The new specification
Advanced Cross-Browser Flexbox
IE 10 中弹性框布局
Properties for the Parent (flex container)
display
flex | inline-flex
flex-flow
<flex-direction> || <flex-wrap>
flex-direction
row | row-reverse | column | column-reverse
flex-wrap
nowrap | wrap | wrap-reverse
justify-content
flex-start | flex-end | center | space-between | space-around
align-items
flex-start | flex-end | center | baseline | stretch
align-content
flex-start | flex-end | center | space-between | space-around | stretch
Properties for the Children (flex items)
Note that float
, clear
and vertical-align
have no effect on a flex item.
flex
none | [<flex-grow> <flex-shrink>? || <flex-basis>]
</div>
align-self
auto | flex-start | flex-end | center | baseline | stretch