A beginners guide to CSS flexbox - part two

In the first part, I wrote about flexbox properties that affected the flex container. In this second part, I'll be giving you flexbox properties that affect the flex items along with how they work.

I'll be using the same pen that I used for part one.

<div class="container">
   <div class="one">1</div>
   <div class="two">2</div>
   <div class="three">3</div>
   <div class="four">4</div>
</div>

.container{
display: flex;
}

.one, .two, .three, .four {
  background-color: #f5f  
  padding: 2rem;
  font-size: 2rem;
}

The main properties are:

• Order
• Flex-grow
• Flex-shrink
• Flex-basis
• Flex
• Align-self

Order

This property specifies the order in which the flex items will be displayed. By default, the items are displayed in the order in which they were written in the source code but with this property, you can change the order of the items.

.one{
 order: 4
}

Flex-grow

This property specifies how much an item should grow or expand to fit the space available. If you give an item the flex-grow value of 2, that will item will take up twice as much space as the other elements in the container.

.one{
 flex-grow:2
}

Flex-shrink

This property unlike flex-grow will specifies how much an item will shrink to fit the space available.

.one{
 flex-shrink: 5
}

As you can see in this image, the first item is much smaller than the rest of the items.

Flex-basis

This property specifies the initial or default value of an item before the space in the container is distributed.

.one{
 flex-basis: 10rem;
}

Flex

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

.one{
 flex: 0 0 10rem;
}

The first element will not grow, will not shrink, and will have an initial length of 10rem.

Align-self

This property works like align-items but is only applied to one item instead of the whole container.

.one{
 align-self: flex-start;
}

That's it! This concludes this mini-series about CSS flexbox for beginners. Hope it helped you understand flexbox better. If you have any questions or comments do it down below.

Comments

[Douglas Parsons]

Hey. Great article and super clear breakdown. I really like how you do one property at a time.

With flex-grow you mention flex-grow of 2 making that particular element twice the size of the others - that's one to be careful of. It doesn't mean twice the size, but that the element will expand to fill empty space twice as quickly.

[Dillon Headley]

If you add min-width: 0; on everything I think it sizes based on total space not just space available.

[Douglas Parsons]

flex-basis: 0; would do the same. It's not always the behaviour you want though - sometimes you want items to only shrink to a certain size before they wrap.

[Dillon Headley]

Great article!
The image for order could be slightly misleading. By default all items have an order of 0. So giving any item an order of 1 would send it to the end because it has a higher order than all the others.
Also you can use negative numbers for order to send to the front.

[Chrissie]

Thanks for the info, I'll edit it and make it more clear 😀