CSS Flexbox #6. The flex-basis Property

The flex-basis property sets the initial length of the flex-items inside a flex-container.

You can think of it as an improved version of the width or height values. That is, flex-basis has always prevalence over width or height.

This tutorial will demonstrate this concept with an example. Let’s start!

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. – The CSS Styles

Create a file called style.css (the file is already linked in the tag of the HTML code).
Copy and paste the following 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. – The CSS Flexbox Styles

Declare the parent container as a flex container.

Edit the CSS code:

.container { display: flex; background-color: #f5ca3c; }

Now, let’s set the width of each flex-item to 33.33%, in order to cover the whole flex-container area.

Edit the CSS code:

.item { width: 33.33%; }

Each one of the items takes one-third of the whole container width.

Edit the CSS code:

.item { flex-basis: 25%; width: 33.33%; }

Noltice that I put the flex-basis declaration before the width declaration, in order to demonstrate that flex-basis has always prevalence over width.

The flex-container has a width of 1266px in a common laptop screen. Change the width of the flex-container to 810px and the flex-basis of each flex-item to 300px.

Edit the CSS code:

.container { display: flex; background-color: #f5ca3c; width: 810px; } .item { flex-basis: 300px; }

As you can notice, the flex-basis property refers to an ideal size of the flex-items, only if there is enough space available in the flex-container. The flex-items were declared with a flex-basis value of 300px, but the flex-container is not wide enough, so each flex-item can only be 270px wide. Notice also, that items will grow and/or shrink past their flex-basis value, according to their flex-grow and/or flex-shrink property values.

Edit the CSS code once again:

.item { max-width: 150px; flex-basis: 300px; }

The max-width value acts in this case as an upper limit of the flex-basis property. That means, flex-items are not allowed to be wider than 150px, although the flex-basis property value was set to 300px. The same applies to the min-width value.

Edit the CSS code:

.item { min-width: 200px; flex-basis: 150px; }

The min-width value acts in this case as a lower limit of the flex-basis property.

The flex-basis Property on the Block Axis

You already learned that the flex-basis property acts on the width of flex-items on the inline axis. On the block axis (flex-direction: column), flex-basis takes the height of the flex-items into account, instead of their width.

Edit the CSS code:

.container { display: flex; flex-direction: column; background-color: #f5ca3c; } .item { flex-basis: 150px; height: 200px; }

In this case, the flex-basis value prevails over the height value, just like with the width value on the inline axis.

Edit the CSS code:

.item { min-height: 200px; flex-basis: 150px; }

The min-height property acts in this case as the lower limit of the flex-basis property so the height of the flex-items will not be less than 200px, independently of the value of the flex-basis property (if it is less than 200px).

Edit the CSS code:

.item { max-height: 150px; flex-basis: 250px; }

The flex-basis upper limit is dictated by the max-height property. Each item is not allowed to be higher than 150px, independently of the value of the flex-basis property (if it is more than 150px or if the content inside the flex-item “overflows” its container).

Edit the HTML code:

<div class="container">
<div class="item item1">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus eaque ducimus inventore provident possimus culpa quas fugiat voluptatibus officiis cupiditate! Laboriosam architecto, dolorum ad voluptatum veniam quibusdam nam vero ipsa cumque magnam sint alias officiis.</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
</div>

Edit the CSS code:

.item { max-height: 200px; flex-basis: 125px; }

The height of the first item is 200px (that’s the upper limit of the flex-basis property), whereas the height of the other 2 flex-items remains according to the declared value of flex-basis (125px).

The flex-basis property specifies the initial size of flex-items before the available space inside the flex-container is distributed according to the flex factors (flex-grow and/or flex-shrink).

Thank you very much for reading and stay tuned for more CSS Flexbox content.

Previous tutorials of this series

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.
View all posts