Theory
Theory
Comments

The flex shorthand property

You can use the flex shorthand property to simultaneously set the growth and shrinkage factors as well as the basic size of the flex item.

The flex property consists of three components that are separated by spaces and that are ordered as follows: flex-grow, flex-shrink and flex-basis. You can see how the two rules are similar in the example below:

.flex-item {
  flex: 1 2 300px;
}

.flex-item {
  flex-grow: 1;
  flex-shrink: 2;
  flex-basis: 300px;
}

The flex property has the following special values: initial, auto, and none. In addition, you should bear in mind that the second and third components are optional. The various property values and their meanings are shown below.

flex: initial; -> flex: 0 1 auto;
flex: auto;  -> flex: 1 1 auto;
flex: none;  -> flex: 0 0 auto;
flex: 1 0;   -> flex: 1 0 0%;
flex: 1;     -> flex: 1 1 0%;

Some browsers will interpret incomplete or special values for the flex property with errors. Therefore, it is better to specify all three components in the value of this property.

Let’s try out this value in practice.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The flex shorthand property</title> <link href="course.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body class="world"> <div class="spot"> <div class="skate racoon-pink"></div> <div class="skate racoon-gray"></div> <div class="skate racoon-orange"></div> </div> </body> </html>

CSS

.spot { display: flex; } .skate { flex: 0 1 auto; } .racoon-orange { }

Goalscompleted

Use the flex property to assign all .skate skateboards a growth factor of 0, a shrinkage factor of 1, and a basic size of 200px.
Assign a growth factor of 1, a shrinkage factor of 0, and a basic size of 200px to the Orange Raccoon,
and then change the shrinkage factor to 2.

The flex shorthand property

Comments

Log in

Sign up

Restore access