CSS 101 - Flexbox
Tags: css, beginners, tutorial
Published: 2021-03-22 02:13:35

---
title: CSS 101 - Flexbox
published: true
description: 
tags: CSS, beginner, tutorial
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--SfWzjSi6--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/y0qmpmhtnw1db8s4jxx9.jpg
series: CSS 101
---

One of my 2021 resolution is to strength my knowledge of CSS. I postpone the training since almost one year. So this time no excuse, everyday, I will publish here on Dev.to what I learn from my CSS course the day before.

Click follow if you want to miss nothing. 

<h2>Flexbox</h2>
Since flexbox is a whole module and not a single property, it involves a lot of things including its whole set of properties. Some of them are meant to be set on the container (parent element, known as “flex container”) whereas the others are meant to be set on the children (said “flex items”).
![flex](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/28zdey4jymig7j6jr5kd.png)


<h2>Flex container properties</h2>
Here a list of properties that apply to the container

This defines a flex container
```css
.container {
    display: flex;
}
```

<b>Flex direction</b> 
This property define the direction flex items are placed in the flex container: 

- row (left to right)
- row-reverse (right to left)
- column (top to bottom)
- column-reverse (bottom to top)
```css
.container {
    flex-direction: row; 
}
```

<b>flex-wrap</b>
By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. (wrap, nowrap, wrap-reverse)
```css
.container {
    flex-wrap: wrap; 
}
```

<b>justify-content</b>
This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size.
<pre>
flex-start    [- - -        ]
flex-end      [        - - -]
center        [    - - -    ]
space-between [-     -     -] 
space-around  [ -    -    - ]
space-evenly  [  -   -   -  ]
</pre>
```css
.container {
    justify-content: flex-start; 
}
```
<b>align-items</b>
This defines the default behavior for how flex items are laid out along the cross axis on the current line
<pre>
flex-start 
[ ----- ]
[       ]
[       ]

flex-end 
[       ]
[       ]
[ ----- ]

center 
[       ]
[ ----- ]
[       ]

stretch 
[ | | | ]
[ | | | ]
[ | | | ]
</pre>
```css
.container {
    align-items: flex-start; 
}
```
<h2>Flex items properties</h2>
Here a list of properties that apply to individual item

<b>Order</b>
By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.
```css
.item {
  order: 5; 
}
```

<b>flex-grow</b>
This defines the ability for a flex item to grow if necessary
```css
.item {
  flex-grow: 1; 
```

<b>align-self</b>
This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.

For example if align-items is set to flex-start 
<pre>
[ ----- ]
[       ]
[       ]
</pre>

Setting .item3 to:
```css
.item3 {
  align-self: flex-end;
}
```
Will create this custom alignment:
<pre>
[ -- -- ]
[       ]
[   _   ]
</pre>

<h2>Conclusion</h2>
That's it for today. Tomorrow the journey continue, see you later! If you want to be sure to miss nothing click follow me here or on twitter!

Follow me on Twitter: <a href="https://twitter.com/justericchapman?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @justericchapman</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>