CSS - Brief Guide on Flexbox Layout - Part 2
Tags: webdev, beginners, tutorial, css
Published: 2022-04-21 14:01:49

It's time for Flexbox part 2, today we will cover the properties of the Flex Items and how we can use it to manipulate the children of the Flex Container. If you are new to Flexbox, I recommend you read Part 1 first, as it will cover the Flex Container properties and other information about Flexbox. 

## Flex Item Properties

Lets recall that the direct children of a Flex Container we call Flex Items. Flex Items also have properties of their own that you can use, these properties are `flex-basis`, `flex-shrink`, `flex-grow`, `order` and `align-self`. (You can also use `flex` as a shorthand property for grow, shrink and basis.)

As usual, start with the basic set up: 

```css

.flex-container {
  width: 400px;
  height: 400px;
  outline: 1px solid black;
  display: flex;
}

.flex-item {
  min-width: 60px;
  min-height: 50px;
  outline: 1px solid black;
}

```

![Flexbox container with 4 elements](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5jg0rcepkxd5efooadf0.png)
 
*Note: I have highlighted the Flex Container using the DevTool, that's why you can see the diagonal dashed lines, this represents the remaining space in the Flex Container. We only used `display: flex` but you can see some default properties have been applied, such as `align-items: stretch` which is why the items are stretch along the cross axis.*

Let's look at the Flex Item's properties one by one:
<br>
- `flex-basis` is a property that allow us to set the default size of the Flex Item this property declared on. You can use the standard CSS length as value or keywords. By default this is set to "auto" which means it will just take the dimensions defined by the Flex Item's `width` and `height` properties. It's good to know that `flex-basis` still obey the `min-width` and `max-width` properties of the Flex Item, but it takes precedent over `width` property.

Example 1 - `flex-basis`- Here, flex-basis is set to "22%" so each item will be 22% of the main axis width. (*Reminder: if `flex-direction` is column, then the main axis is the vertical direction so you would be setting the "height" of the Flex Item*)

![flex-basis example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lgb4srn1vzpp9v1zhgu5.png)
 
<br>

Example 2 - `flex-basis`- Here, flex-basis is set to "150px" - Notice something weird below? Our Flex Container is only 400px wide, so why does it look like each Flex Item fits perfect inside, shouldn't it overflow? The answer is the default `flex-shrink` property, which we will cover next.

![Flex-basis example 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijkwijezovusudpb81g7.png)

<br>

- `flex-shrink` is a property that allow you to control if the Flex Item should shrink or not. The value is a number or keyword which represents the factor of the shrinking. The default value is 1 and negative values are not allowed.

Example - `flex-shrink` - Here, I have set various shrink value on each Flex Items to showcase how the number affect the shrink ratio. You can see that all have a `flex-basis` of 150px, with shrink set to 0, item D take up 150px and the remaining space is used to calculate the widths of the others with various shrinking value.

![Flex-shrink example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jx066ruqehl0vw455s4o.png)
 
<br>

- `flex-grow` is a property that allow you to control how much a Flex Item should grow. Similar to `flex-shrink` it takes a number value to determine the growth rate. The default is 0 and the number cannot be negative. This property will take the available space then grow the Flex Item proportional to the number value.

Example - `flex-grow` - Here, I have set the growth values to be different for each Flex Item so you can see how this effect them. Judging by eye, you can see that C is roughly twice as big as B and D is roughly 4 times as big as B. Fortunately, you don't need to know the calculations behind the scene to use the property 😅.

![flex-grow example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qbpmxb94r45tcu09s3li.png)
 
<br>

- `align-self` is a property that allow you to set cross alignment of the Flex Item and ignore the Flex Container property `align-items`. 

Example - `align-self` - Here, you can see how Flex Item `align-self` place the item on the cross axis.

![Align self example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nlabjl22ss4k4udy6n81.png)

<br>

- `order` is an easy property to use, it allows you to move the order of the Flex Item around. If multiple Flex Items have the same order, then it will appear in the same order as written in the source/markup. If possible try to avoid using order, as this only changes what appears on the screen so it is not that great for accessibility. But it does have it's uses. You can check out the use cases at [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items).

Example - `order` - Here, I changed the `flex-direction` to column just for the fun of it. You can see that Flex Items in `order: 1` appears before `order: 2` items, and the items in the same order are laid out as per the source.

![Flex order example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sosxg0bll8ls594ijwqj.png)
 
<br>

### Summary

We have now covered Flexbox! Now you know how to set up a Flex Container, define the flow direction and can align the items. You can also manipulate the size of the Flex Item individually using `flex: <flex-grow> <flex-shrink> <flex-basis>;` as shorthand notation or just set the properties individually, and you can change the Flex Items cross alignment and appearance order using `align-self` and `order`, respectively.

I would like to share with you also this handy [Flexbox cheatsheet](https://flexboxsheet.com/) to help remind you of the properties. It is quite concise and I used this a lot when I started out (and sometimes even now when I forget things 😄). 

Other resources: 
- [W3School](https://www.w3schools.com/css/css3_flexbox.asp) 
- [MDN Docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) 
- [Flexbox Froggy](https://flexboxfroggy.com/), if you like games.
- [Traversy Media](https://www.youtube.com/watch?v=JJSoEo8JSnc), if you like learning through video.

If you made it this far, thank you for reading, I hope that was easy to understand. As always, if you have any feedback or suggest feel free to leave a comment. 

![Edward Elric smiling](http://images5.fanpop.com/image/photos/31600000/smile-full-metal-alchemist-31695306-400-300.jpg)