You will very rarely see the
flex-basis properties used individually; instead they are combined into the
flex shorthand. The
flex shorthand allows you to set the three values in this order —
The live example below allows you to test out the different values of the flex shorthand; remember that the first value is
flex-grow. Giving this a positive value means the item can grow. The second is
flex-shrink — with a positive value the items can shrink, but only if their total values overflow the main axis. The final value is
flex-basis; this is the value the items are using as their base value to grow and shrink from.
There are also some predefined shorthand values which cover most of the use cases. You will often see these used in tutorials, and in many cases these are all you will need to use. The predefined values are as follows:
flex: initial resets the item to the initial values of Flexbox. This is the same as
flex: 0 1 auto. In this case the value of
flex-grow is 0, so items will not grow larger than their
flex-basis size. The value of
flex-shrink is 1, so items can shrink if they need to rather than overflowing. The value of
auto. Items will either use any size set on the item in the main dimension, or they will get their size from the content size.
flex: auto is the same as using
flex: 1 1 auto; everything is as with
flex:initial but in this case the items can grow and fill the container as well as shrink if required.
flex: none will create fully inflexible flex items. It is as if you wrote
flex: 0 0 auto. The items cannot grow or shrink but will be laid out using flexbox with a
The shorthand you often see in tutorials is
flex: 1 or
flex: 2 and so on. This is as if you used
flex: 1 1 0 or
flex: 2 1 0 and so on, respectively. The items can grow and shrink from a
flex-basis of 0.
Try these shorthand values in the live example below.