GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → jamiebuilds → Flexbox Cheat Sheet

jamiebuilds / Flexbox Cheat Sheet

Licence: mit
Quick references to everything you need to know about using flexbox

Labels

css

Flexbox Cheat Sheet

Quick references for everything you need to know about using flexbox

YO! THIS DOCUMENT IS A WORK IN PROGRESS. PROCEED WITH CAUTION

Resources

2009 Spec

Deprecated (See: 2012 Spec)

W3C Reference

display:                   box;
display:            inline-box;
box-align:             stretch; /* start | end | center | baseline | stretch */
box-direction:          normal; /* normal | reverse | inherit */
box-flex:                  0.0; /* <number> */
box-flex-group:              1; /* <integer> */
box-lines:              single; /* single | multiple */
box-ordinal-group:           1; /* <integer> */
box-orient:        inline-axis; /* horizontal | vertical | inline-axis | block-axis | inherit */
box-pack:                start; /* start | end | center | justify */

2011 Spec

Deprecated (See: 2012 Spec)

W3C Reference

display:               flexbox;
display:        inline-flexbox;
flex-align:            stretch; /* start | end | center | baseline | stretch */
flex-flow:                 row; /* [ row | row-reverse | column | column-reverse ] [ wrap | wrap-reverse ]? */
flex-line-pack:          start; /* start | end | center | justify */
flex-order:                  0; /* <number> */
flex-pack:               start; /* start | end | center | justify */

/* Flex Function
 *   flex( [ <pos-flex> <neg-flex>? ]? || <preferred-size>? )
 */

2012 Spec

W3C Reference

display:               flex;
display:        inline-flex;
align-content:      stretch; /* flex-start | flex-end | center | space-between | space-around | stretch */
align-items:        stretch; /* flex-start | flex-end | center | baseline | stretch */
align-self:            auto; /* auto | flex-start | flex-end | center | baseline | stretch */
flex:              0 1 auto; /* none | [ <flex-grow> <flex-shrink>? || <flex-basis> ] */
flex-basis:            auto; /* <width> */
flex-direction:         row; /* row | row-reverse | column | column-reverse */
flex-flow:       row nowrap; /* <flex-direction> || <flex-wrap> */
flex-grow:                0; /* <number> */
flex-shrink:              0; /* <number> */
flex-wrap:           nowrap; /* nowrap | wrap | wrap-reverse */
justify-content: flex-start; /* flex-start | flex-end | center | space-between | space-around */
order:                    0; /* <integer> */

Display Box

Deprecated (See: Display Flex)

W3C Reference

display:  -webkit-box;
display:     -moz-box;
display:          box;

/* Bourbon */
@include display-box;

/* Compass */
@include display-box;

Display Inline Box

Deprecated (See: Display Inline Flex)

W3C Reference

display: inline-box;

Display Flexbox

Deprecated (See: Display Flex)

W3C Reference

display: -ms-flexbox;

Display Flexbox

Deprecated (See: Display Inline Flex)

W3C Reference

display: -ms-inline-flexbox;

Display Flex

W3C Reference · MDN Reference

display: -webkit-flex;
display:    -moz-flex;
display:         flex;

/* Bourbon: New Flex Box */
@include display(flex);

/* Nib */
display flex

/* Less Hat */
.display(flex);

Display Inline Flex

W3C Reference · MDN Reference

display: -webkit-inline-flex;
display:    -moz-inline-flex;
display:         inline-flex;

/* Bourbon: New Flex Box */
@include display(inline-flex);

/* Nib */
display inline-flex

/* Less Hat */
.display(inline-flex);

Box Flex

Deprecated (See: Flex)

W3C Reference · MDN Reference

-webkit-box-flex: <number>;
   -moz-box-flex: <number>;
        box-flex: <number>;

/* Bourbon */
@include box-flex(<number>);

/* Compass */
$default-box-flex: 0;
@include box-flex(<number>);

Flex

W3C Reference · MDN Reference

-webkit-flex: [ none | [ <flex-grow> <flex-shrink>? || <flex-basis> ] ];
   -moz-flex: [ none | [ <flex-grow> <flex-shrink>? || <flex-basis> ] ];
        flex: [ none | [ <flex-grow> <flex-shrink>? || <flex-basis> ] ];

/* Bourbon: New Flex Box */
@include flex( [ none | [ <flex-grow> <flex-shrink>? || <flex-basis> ] ] );

/* Nib */
flex [ none | [ <flex-grow> <flex-shrink>? || <flex-basis> ] ]

/* Less Hat */
.flex( [ none | [ <flex-grow> <flex-shrink>? || <flex-basis> ] ] )

Box Ordinal Group

Deprecated (See: Order)

W3C Reference · MDN Reference

-webkit-box-ordinal-group: <integer>;
   -moz-box-ordinal-group: <integer>;
        box-ordinal-group: <integer>;

/* Bourbon */
@include ordinal-group(<integer>);

/* Compass */
$default-box-ordinal-group: 1;
@include box-ordinal-group(<integer>);

Order

W3C Reference · MDN Reference

-webkit-order: <integer>;
   -moz-order: <integer>;
        order: <integer>;

/* Bourbon: New Flex Box */
@include order(<integer>);

/* Nib */
order <integer>

/* Less Hat */
.order(<integer>);

Box Orient

W3C Reference · MDN Reference

-webkit-box-orient: [ horizontal | vertical | inline-axis | block-axis | inherit ];
   -moz-box-orient: [ horizontal | vertical | inline-axis | block-axis | inherit ];
        box-orient: [ horizontal | vertical | inline-axis | block-axis | inherit ];

/* Bourbon */
@include box-orient([ horizontal | vertical | inline-axis | block-axis | inherit ]);

/* Compass */
$default-box-orient: horizontal;
@include box-orient([ horizontal | vertical | inline-axis | block-axis | inherit ]);

Box Pack

W3C Reference · MDN Reference

-webkit-box-pack: [ start | end | center | justify ];
   -moz-box-pack: [ start | end | center | justify ];
        box-pack: [ start | end | center | justify ];

/* Bourbon */
@include box-pack([ start | end | center | justify ]);

/* Compass */
$default-box-pack: start;
@include box-direction([ start | end | center | justify ]);

Box Align

Deprecated (See: Align Self)

W3C Reference · MDN Reference

-webkit-box-align: [start | end | center | baseline | stretch];
   -moz-box-align: [start | end | center | baseline | stretch];
        box-align: [start | end | center | baseline | stretch];

/* Bourbon */
@include box-align([ start | end | center | justify ]);

/* Compass */
$default-box-align: stretch;
@include box-align([ start | end | center | justify ]);

Align Self

W3C Reference · MDN Reference

-webkit-align-self: [ auto | flex-start | flex-end | center | baseline | stretch ];
   -moz-align-self: [ auto | flex-start | flex-end | center | baseline | stretch ];
        align-self: [ auto | flex-start | flex-end | center | baseline | stretch ];

/* Bourbon: New Flex Box */
@include align-self([ auto | flex-start | flex-end | center | baseline | stretch ]);

/* Nib */
align-self [ auto | flex-start | flex-end | center | baseline | stretch ]

/* Less Hat */
.align-self([ auto | flex-start | flex-end | center | baseline | stretch ]);

Box Direction

Deprecated (See: Flex Direction)

W3C Reference · MDN Reference

-webkit-box-direction: [ normal | reverse | inherit ];
   -moz-box-direction: [ normal | reverse | inherit ];
        box-direction: [ normal | reverse | inherit ];

/* Bourbon */
@include box-direction([ normal | reverse | inherit ]);

/* Compass */
$default-box-direction: normal;
@include box-direction([ normal | reverse | inherit ]);

Flex Direction

W3C Reference · MDN Reference · CSS Tricks Almanac

-webkit-flex-direction: [ row | row-reverse | column | column-reverse ];
   -moz-flex-direction: [ row | row-reverse | column | column-reverse ];
        flex-direction: [ row | row-reverse | column | column-reverse ];

/* Bourbon: New Flex Box */
@include flex-direction($value: row);

/* Nib */
flex-direction [ row | row-reverse | column | column-reverse ]

/* Less Hat */
.flex-direction([ row | row-reverse | column | column-reverse ]);

Align Content

W3C Reference · MDN Reference · CSS Tricks Almanac

-webkit-align-content: [ flex-start | flex-end | center | space-between | space-around | stretch ];
   -moz-align-content: [ flex-start | flex-end | center | space-between | space-around | stretch ];
        align-content: [ flex-start | flex-end | center | space-between | space-around | stretch ];

/* Bourbon: New Flex Box */
@include align-content([ flex-start | flex-end | center | space-between | space-around | stretch ]);

/* Nib */
align-content [ flex-start | flex-end | center | space-between | space-around | stretch ]

/* Less Hat */
.align-content([ flex-start | flex-end | center | space-between | space-around | stretch ])

Justify Content

W3C Reference · MDN Reference · CSS Tricks Almanac

-webkit-justify-content: [ flex-start | flex-end | center | space-between | space-around ];
   -moz-justify-content: [ flex-start | flex-end | center | space-between | space-around ];
        justify-content: [ flex-start | flex-end | center | space-between | space-around ];

/* Bourbon: New Flex Box */
@include justify-content([ flex-start | flex-end | center | space-between | space-around ]);

/* Nib */
justify-content [ flex-start | flex-end | center | space-between | space-around ]

/* Less Hat */
.justify-content([ flex-start | flex-end | center | space-between | space-around ]);

Support

Have a question or need help? Tweet @thejameskyle.

Contributing

As an open-source project, contributions are more than welcome, they're extremely helpful and actively encouraged. If you see any room for improvement, open an issue or submit a pull request. Also make sure to take a look at the contributing doc.

License

This project is provided under the terms of the MIT License.

Authored by James Kyle · Github · Twitter · CodePen

Built Equal · Made in Boston

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].