Let's Flexbox it ......part-2

Helloo and welcome to the article #3.2, part-2 of "Let's Flexbox it",

In this part we are going to talk about the flexbox properties to be applied on the child elements to the flex-container known as flex-items.

So let's get started 🐱‍🏍

The very first property we are going talk about is -

the flex-grow property

This property allows the flex-item to expand itself to fill the extra space inside the container if needed,

What it actually does?

It basically defines how much space the item will occupy of the available space inside a flex-container,

It takes unitless positive integer(number) as it's value, where negative numbers are not acccepted.

And if you set it's value same for all the flex-items, they will all occupy equal space of the available space in a flex-container.

.flex-item {
  flex-grow: 2; /* default is 0*/
}

the flex-shrink property

This property is the opposite of the flex-grow property, it allows the flex-items to shrink if necessary,

It also takes unitless positive integer(number) as it's value, but no negative value is allowed.

.flex-item {
  flex-shrink: 2; /* default is 1*/
}

the flex-basis property

By adding this property to a flex-item we can define the initial size of the item before the space inside the container is distributed by flex-shrink or flex-grow properties , it takes size in units(px, em, rem, %, .etc) or an auto(default) as it's value.

.flex-item {
flex-basis: 50px;
}

the flex property

It is a shorthand property for flex-grow and flex-shrink and flex-basis together, it allows to set all three properties in a single line, as:

.flex-item {
flex: 1 0 auto;
}

the order property

To change the order of placing any individual item inside the container, the order property comes in use,

It takes integer as value with no restrictions on using negative values:

.flex-item {
order: 2;
}

the align-self property

To individually align each item or any item, we will add align-self property to the flex-item, it takes the same values as the align-items property as discussed in the part-1 of this article

.flex-container {
align-self: flex-end;
}

Possible values:

• stretch: (default) stretch the items along the cross axis to fill the remaining space in the container while respecting the min or max of height or width,
• flex-start: align the items to the beginning of the container,
• center: to align the items to the center of the container,
• flex-end: it aligns the items to the end of the container,
• baseline: aligns items with the baseline of the text inside.

That's all for now, keep yourself safe, keep learning, keep growing