A Guide to CSS Flexbox: Part II

A Guide to CSS Flexbox: Part II

The previous article covers the basics of CSS Flexbox, we’ve learned how to use the flexbox properties available in a flexbox parent. If you haven't read the article yet, I would highly encourage you to check that before moving to this one.

Our aim in this article is to learn and apply the available properties to the flexbox items.

So, we've already discussed these properties before (In part 1 of this series - Basics of CSS Flexbox):

Flex container and flex item
Main axis and Cross axis
The display:flex property
Flex-wrap
Flex-direction
Flex-flow
Justify-content
Align-items
Align-content

Let's start discussing the topics that are left.

1. `flex-order` Property:

The flex-order property is used to define the order of the flex-items.

Here is the syntax:

.flex-item {
    order: 0 | -1 | 4;
}

The default value for all the items is zero. If we apply any value greater than zero to a flex-item, the flex-item will be pushed to the end of all the items. For example, if you look at the embed below, you'll find that the item-1 class has an order of 4, pushing it to the end. And as you might have guessed, any value which is less than 0 will push the element to the first. The item-4 class has a flex-order value of -1, which is pushing it to the first.

https://codepen.io/nemo011/pen/eYvaear

2. `flex-grow` Property:

The flex-grow property is used to make a flex-item grow if sufficient space is available in the parent container. The flex-grow takes a unitless value and uses it as a proportion.

Here is the syntax:

.flex-item {
    flex-grow: 2 | inherit | initial;
}

https://codepen.io/nemo011/pen/RwpmjzN

This property will specify how much available free space should be assigned to a flex item. There are few things to note when using the flex-grow.

It assigns the space open in the flex-container to the flex-items. And the proportion is determined by the number of flex-grow values we have in the flex-items.

For example, if we have a flex-grow: 2; value in the first item and a flex-grow: 1; value in the second item, flexbox will divide the total available space by 3 and will add 2/3 of the available space to the first item and 1/3 to the second item. The initial value will set its value to the default and will inherit the value from its parent.

CSS flexbos flex-grow property

3. `flex:shrink` Property:

This property is the opposite of the flex-grow property. It determines how much one element will shrink if necessary.

Here is the syntax:

.flex-item {
    flex-shrink: 2 | initial | inherit;
}

The flex-shrink property is not much used, and also, the calculation of flex-shrink is more complicated than flex-grow. We’ll not be discussing it in-depth in this article. For now, keep that in mind that the higher the shrink value, the more the item shrinks. To get an idea about it, open the below embed in fullscreen and resize it. You'll notice that the flex-item having flex-shrink value 2, shrinks more than the other items.

It also takes the initial and inherit values. The initial will set the value to default, and inherit will inherit the parent container value.

The default value of flex-shrink is 1.

https://codepen.io/nemo011/pen/LYWoOKo

4. `flex:basis` Property:

Setting the flex-basis property is like setting an initial width to the items. So why don’t we use the min-width property? Because the min-width property will make our code non-responsive if we reach a smaller size than the size specified in min-width. Also, the browser first checks for the flex-basis property. If it's not available, then it starts searching for the width and calculates the flex-basis value, which we don't want. So, it is always a good idea to use the flex-basis property.

Here is the syntax:

.flex-item {
    flex-basis: 250px | 50% | auto;
}

https://codepen.io/nemo011/pen/ExWzbqO

5. The `flex` Property:

The flex property is the shorthand for the flex-grow, flex-shrink, and flex-basis property.

Here is the syntax:

.flex-item {
    flex: flex-grow flex-shrink flex-basis;
}

The second and third parameters are optional. The default value of flex is 0 1 auto. Because we know the default flex-grow value is 0, the flex-shrink value is 1 and flex-basis is auto. However, we can set values according to our needs.

https://codepen.io/nemo011/pen/poempzp

For example, in the above code, we set the flex value 2 2 auto to the first flex item.

If you resize the output, you'll find that the first element is growing and shrinking more than the other items. At the same time, the second item is not at all shrinking because its flex-shrink value is set to zero. Try resizing the output to view it in action.

6. `align-self` Property:

The align-self property overrides the align-items property assigned on the flex-container. We use this to set up the alignment on individual items. To understand the align-self property, you must know the align-items property available in the flex-container (check the first part of the article). The align-self takes the same values that are used in align-items, i.e.,

Flex-start
Flex-end
Center
Stretch
Baseline

Here's the image from our previous article to help you understand the values,

CSS flexbox align-self property

I don't think I’ve to explain the values again here. Check out the code snippet, and you'll get an idea.

https://codepen.io/nemo011/pen/jOBoYOG

So this was all about properties that can be applied to the flex-items.

I hope you liked this two-part guide to the flexbox. Leave a comment if you have any doubts or suggestions. 😊 And, here is another article suggestion for you. 😄