Complete Guide to CSS Flexbox - Part II

In the previous article covering 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 properties that are available to the flexbox items.

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

1. Flex container and flex item

2. Main axis and Cross axis

3. The display:flex property

4. Flex-wrap

5. Flex-direction

6. Flex-flow

7. Justify-content

8. Align-items

9. 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 which is 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.

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;
}

This CSS Flexbox property will specify how much of 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.

3. flex:shrink Property:

This CSS Flexbox 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, just 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.

4. flex:basis Property:

Setting the flex-basis property is like setting an initial width to the items. So why don’t we just 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;
}

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.

For example, in the above code, we are setting 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. Whereas the second item is not at all shrinking because it’s 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 setup alignment on individual items. To understand the align-self property, you must know the align-items property that is 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,

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

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

I hope you liked this two-part guide to the flexbox. If you are new to CSS, I'd highly suggest you check our CSS course.

You may also like:

• CSS: Creating Navigation Bars

• Float - right & left in CSS

• CSS: Adding Icons to your Webpage

• HTML Button with Gradient Background and Shadow using CSS