Dive into Flexbox
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
.flexbox {
display: -webkit-box; /* Old Safari */
display: -webkit-flex; /* Safari 6.1+ */
display: -ms-flexbox; /* IE 10 */
display: flex;
}
flex-flow
<flex-direction> || <flex-wrap>
flex-direction
row | row-reverse | column | column-reverse
flex-direction: row; /*Initial*/
flex-wrap
nowrap | wrap | wrap-reverse
flex-wrap: nowrap; /*Initial*/
justify-content
flex-start | flex-end | center | space-between | space-around
justify-content: flex-start; /*Initial*/
.flexbox {
-webkit-justify-content: space-between; /* Safari 6.1+ */
-ms-flex-pack: justify; /* IE 10 */
justify-content: space-between;
}
align-items
flex-start | flex-end | center | baseline | stretch
align-items: stretch; /*Initial*/
.flexbox {
-webkit-align-items: center; /* Safari 7.0+ */
-ms-flex-align: center; /* IE 10 */
align-items: center;
}
align-content
flex-start | flex-end | center | space-between | space-around | stretch
align-content: stretch; /*Initial*/
Properties for the Children (flex items)
Note that float
, clear
and vertical-align
have no effect on a flex item.
order
<integer>
order: 0; /*Initial*/
flex
none | [<flex-grow> <flex-shrink>? || <flex-basis>]
flex: 0 1 main-size; /*Initial*/
flex: 0 main-size;
flex: initial;
/* Equivalent to `flex: 0 1 main-size` (Initial). Sizes the item based on the 'width'/'height' properties. (If the item's main size property computes to auto, this will size the flex item based on its contents.) Makes the flex item inflexible when there is positive free space, but allows it to shrink to its min-size when there is insufficient space. The alignment abilities or auto margins can be used to align flex items along the main axis. */
flex: auto;
/* Equivalent to `flex: 1 1 main-size`. Sizes the item based on the 'width'/'height' properties, but makes them fully flexible, so that they absorb any free space along the main axis. If all items are either `flex: auto`, `flex: initial`, or `flex: none`, any positive free space after the items have been sized will be distributed evenly to the items with `flex: auto`. */
flex: none;
/* Equivalent to `flex: 0 0 main-size`. This value sizes the item according to the 'width'/'height' properties, but makes the flex item fully inflexible. This is similar to `initial`, except that flex items are not allowed to shrink, even in overflow situations. */
flex: <positive-number>;
/* Equivalent to `flex: <positive-number> 1 0%`. Makes the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the free space in the flex container. If all items in the flex container use this pattern, their sizes will be proportional to the specified flex factor. */
</div>
align-self
auto | flex-start | flex-end | center | baseline | stretch
align-self: auto; /*Initial*/
Written on October 25, 2014