CSS Flexbox #11. Shorthand Default Values

CSS Flexbox #11. Shorthand Default Values

In the last tutorial, you learned about the flex shorthand property. It groups three flexbox properties in one in the following order:

  1. flex-grow
  2. flex-shrink
  3. flex-basis.

This property can accept up to three values, however, you can enter only one or two values and the CSS Flexbox specification will assign the default missing value to the corresponding flex items.

Let’s check this out with an example!


Step #1. Create the HTML

  • Open your preferred code editor.
  • Create an empty HTML file.
  • Visit this page, copy the HTML code and save the file.

Step #2. Create the CSS

It’s time to create the basic styling.

  • Create a file called style.css (the file is already linked in the tag of the HTML code).
  • Copy and paste this code:
/* GLOBAL STYLES */ * 
{ 
box-sizing: border-box; } body { background-color: #AAA; margin: 0px 50px 50px; } .item { padding: 2rem; border: 5px solid #87b5ff; border-radius: 3px; font-size: 2em; font-family: sans-serif; font-weight: bold; background-color: #1c57b5; 
}

Step #3. Create the Flexbox Styles

You have to declare the flex container first.

  • Edit the CSS code:
.container { display: flex; background-color: #f5ca3c; }

The .container element is now a flex container. All its direct children have turned into flex items at the same time.


Step #4. The flex Property Defaults

You have to apply the flex shorthand property to one, some or all the flex items inside the container. As you already know, you can use one, two or three values here.


One-Value Syntax

The one-value syntax can accept a couple of value types:

  • a number – it will be interpreted as flex-grow
  • a valid keyword – initial, auto or none.

Open your text editor in order to test these value types.

  • Edit the CSS code:
.item { flex: 1; }

You set the flex-grow factor of every item to 1. That means every item will grow in equal proportion to fill up the available space.

  • Edit the CSS code:
.item { flex: auto; }

Items will grow and shrink with a factor of 1. The flex-basis value is auto.

  • Edit the CSS code:
.item { flex: initial; }

This is the same as flex: 0 1 auto; – items have a flex-grow factor of 0 (they do not grow to fill up the available space, however, they will shrink in the same proportion, in case that there is not enough space available.

  • Edit the CSS code:
.item { flex: none; }

The items are fully inflexible. They will not be able to grow or shrink relative to the flex container. This would be the same as typing flex: 0 0 auto;


Two-Value Syntax

The two value syntax can accept:

  • two numbers – interpreted as flex-grow + flex-shrink
  • a number and a width value – interpreted as flex-grow + flex-basis
  • Edit the CSS file once again:
.item { flex: 0 2; }

In this case, you set the flex-grow factor to 0 – items will not grow to fill the available space – and a flex-shrink factor of 2, that means, all items will shrink in the same proportion to accommodate themselves into the available space if there wasn’t enough.

  • Edit the CSS one last time:
.item { flex: 0 150px; }

Now every item has a flex-grow factor of 0, and a flex-basis value of 150px.

I hope you liked this tutorial. Stay tuned for more flexbox content. Thanks for reading!

Author

  • Jorge Montoya

    Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.

0 0 votes
Article Rating
Subscribe
Notify of
1 Comment
Oldest
Newest
Inline Feedbacks
View all comments
osteammate
3 years ago

This was helpful. Thank you. Love from Earth-3.

1
0
Would love your thoughts, please comment.x
()
x