Let’s look a little closer at what actually happened when you put
flex: 1 on those flex items in the last lesson.
This section contains a general overview of topics that you will learn in this lesson.
- You’ll learn the 3 properties that are defined by the
flexshorthand, and how to use them individually.
flex declaration is actually a shorthand for 3 properties that you can set on a flex item. These properties affect how flex items size themselves within their container. You’ve seen some shorthand properties before, but we haven’t officially defined them yet.
Shorthand properties are CSS properties that let you set the values of multiple other CSS properties simultaneously. Using a shorthand property, you can write more concise (and often more readable) stylesheets, saving time and energy.
Source: Shorthand properties on MDN
In this case,
flex is actually a shorthand for
In the above screenshot,
flex: 1 equates to:
Very often you see the flex shorthand defined with only one value. In that case, that value is applied to
flex-grow. So when we put
flex: 1 on our divs, we were actually specifying a shorthand of
flex: 1 1 0.
For an interactive explanation and demo of the flex shorthand, check out this Scrim:
flex-grow expects a single number as its value, and that number is used as the flex-item’s “growth factor”. When we applied
flex: 1 to every div inside our container, we were telling every div to grow the same amount. The result of this is that every div ends up the exact same size. If we instead add
flex: 2 to just one of the divs, then that div would grow to 2x the size of the others.
In the following example the
flex shorthand has values for
flex-basis specified with their default values.
flex-shrink is similar to
flex-grow, but sets the “shrink factor” of a flex item.
flex-shrink only ends up being applied if the size of all flex items is larger than their parent container. For example, if our 3 divs from above had a width declaration like:
width: 100px, and
.flex-container was smaller than
300px, our divs would have to shrink to fit.
The default shrink factor is
flex-shrink: 1, which means all items will shrink evenly. If you do not want an item to shrink then you can specify
flex-shrink: 0;. You can also specify higher numbers to make certain items shrink at a higher rate than normal.
Here’s an example. Note that we’ve also changed the
flex-basis for reasons that will be explained shortly. If you shrink your browser window you’ll notice that
.two never gets smaller than the given width of 250px, even though the
flex-grow rule would otherwise specify that each element should be equally sized.
An important implication to notice here is that when you specify
flex-shrink, flex items do not necessarily respect your given values for
width. In the above example, all 3 divs are given a width of 250px, but when their parent is big enough, they grow to fill it. Likewise, when the parent is too small, the default behavior is for them to shrink to fit. This is not a bug, but it could be confusing behavior if you aren’t expecting it.
flex-basis simply sets the initial size of a flex item, so any sort of
flex-shrinking starts from that baseline size. The shorthand value defaults to
flex-basis: 0%. The reason we had to change it to
auto in the
flex-shrink example is that with the basis set to
0, those items would ignore the item’s width, and everything would shrink evenly. Using
auto as a flex-basis tells the item to check for a width declaration (
Important Note About Flex-Basis:
There is a difference between the default value of
flex-basisand the way the
flexshorthand defines it if no
flex-basisis given. The actual default value for
auto, but when you specify
flex: 1on an element, it interprets that as
flex: 1 1 0. If you want to only adjust an item’s
flex-growyou can simply do so directly, without the shorthand. Or you can be more verbose and use the full 3 value shorthand
flex: 1 1 auto, which is also equivalent to using
What is flex: auto?
If you noticed, we mentioned a new flex shorthand
flex: autoin the previous note. However we didn’t fully introduce it.
flex: autois one of the shorthands of flex. When
autois defined as a flex keyword it is equivalent to the values of
flex-basis: autoor to
flex: 1 1 autousing the flex shorthand. Note that
flex: autois not the default value when using the flex shorthand despite the name being “auto” which may be slightly confusing at first. You will encounter and learn more about
flex: autoand its potential use-cases when reading through the assignment section.
In practice you will likely not be using complex values for
flex-basis. Generally, you’re most likely to use declarations like
flex: 1; to make divs grow evenly and
flex-shrink: 0 to keep certain divs from shrinking.
It is possible to get fancy, and set up layouts where some columns relate to each other in a specific ratio, so it’s useful to know that you can use other values, but those are relatively rare.
Read W3C’s flex section to understand the basic values of common flex shorthand values
This MDN Doc summarizes the entire flex shorthand values as well as introduces some new syntax that hasn’t been covered in the previous article.
This CSS Tricks article explains the individual flex-grow, flex-shrink and flex-basis properties in detail
Watch this interactive Scrim for an alternative explanation and demo of using flex-grow, flex-shrink and flex-basis in a real world scenario:
This section contains questions for you to check your understanding of this lesson on your own. If you’re having trouble answering a question, click it and review the material it links to.
This section contains helpful links to related content. It isn’t required, so consider it supplemental.
- Check out this video explaining how flexbox works and why.