{"id":13976,"date":"2011-08-31T20:05:09","date_gmt":"2011-09-01T03:05:09","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=13976"},"modified":"2022-09-30T08:34:30","modified_gmt":"2022-09-30T15:34:30","slug":"flex","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/f\/flex\/","title":{"rendered":"flex"},"content":{"rendered":"\n

The flex<\/code> property is a sub-property of the Flexible Box Layout module<\/a>.<\/p>\n\n\n\n

This is the shorthand for flex-grow<\/code>, flex-shrink<\/code> and flex-basis<\/code>. The second and third parameters (flex-shrink<\/code> and flex-basis<\/code>) are optional.<\/p>\n\n\n

Syntax<\/h3>\n\n\n
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]\n\n.flex-item {\n\n  \/* this *\/\n  flex: 1 100px;\n\n  \/* is the same as *\/\n  flex-grow: 1;\n  flex-basis: 100px;\n\n  \/* and it leaves the flex-shrink property alone, which would be *\/\n  flex-shrink: inherit; \/* defaults to 1 *\/\n\n}<\/code><\/pre>\n\n\n\n
Here’s the scoop on what the values map to depending on how many values you give it:<\/p>\n\n\n\n
flex: none \/* value 'none' case *\/\nflex: <'flex-grow'> \/* One value syntax, variation 1 *\/\nflex: <'flex-basis'> \/* One value syntax, variation 2 *\/\nflex: <'flex-grow'> <'flex-basis'> \/* Two values syntax, variation 1 *\/\nflex: <'flex-grow'> <'flex-shrink'> \/* Two values syntax, variation 2 *\/\nflex: <'flex-grow'> <'flex-shrink'> <'flex-basis'> \/* Three values syntax *\/\nflex: inherit<\/code><\/pre>\n\n\n
Common values for flex<\/code><\/h3>\n\n
flex: 0 auto;<\/h4>\n\n\n
This is the same as flex: initial;<\/code> and the shorthand for the default value: flex: 0 1 auto<\/code>. It sizes the item based on its width<\/code>\/height<\/code> properties (or its content if not set).<\/p>\n\n\n\n
It makes the flex item inflexible when there is some free space left, but allows it to shrink to its minimum when there is not enough space. The alignment abilities or auto<\/code> margins can be used to align flex items along the main axis.<\/p>\n\n\n
flex: auto;<\/h4>\n\n\n
This is equivalent to flex: 1 1 auto<\/code>. Beware, this is not the default value. It sizes the item based on its width<\/code>\/height<\/code> properties, but makes it fully flexible so that they absorb any extra space along the main axis.<\/p>\n\n\n\n
If all items are either flex: auto<\/code>, flex: initial<\/code>, or flex: none<\/code>, any remaining space after the items have been sized will be distributed evenly to the items with flex: auto<\/code>.<\/p>\n\n\n
flex: none;<\/h4>\n\n\n
This is equivalent to flex: 0 0 auto<\/code>. It sizes the item according to its width<\/code>\/height<\/code> properties, but makes it fully inflexible.<\/p>\n\n\n\n
This is similar to flex: initial<\/code> except it is not allowed to shrink, even in an overflow situation.<\/p>\n\n\n
flex: <positive-number><\/h4>\n\n\n
Equivalent to flex:  1 0px<\/code>. It makes the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the remaining space.<\/p>\n\n\n\n
If all items in the flex container use this pattern, their sizes will be proportional to the specified flex factor.<\/p>\n\n\n
Demo<\/h3>\n\n\n
The following demo shows a very simple layout with Flexbox thanks to the flex<\/code> property:<\/p>\n\n\n\n