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:
flex-grow
flex-shrink
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
ornone.
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!
This was helpful. Thank you. Love from Earth-3.