CSS Flex-box Quick Guide
Tags: css, webdev, html, beginners
Published: 2022-05-11 07:14:23

If you are a Frontend Developer & facing some hard times mainly with the styling part of your website this article is for you🤗.

The flexbox for a website is mainly used for purpose of layout, and alignment for the children of a container.

## Basics

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/577uj733t4og13lqc62g.png)

The figure shown above is the basic building block of how the flex property works in CSS.

- **Flex Container**: It is the main container to which CSS display: flex property will be given.
- **Flex Items**: Children of the main container which will laid out according to the flex-direction property.
- **Main Size**: Total size i.e "width/height" of the main container in whichever is along the main axis.
- **Cross Size**: Total size i.e "width/height" of the main container in whichever is along the cross axis.
- **Main Axis**: It is the axis along which items are laid out either row/column as in the figure it is in a row. This changes according to the flex-direction property.
- **Cross Axis**: It is the axis perpendicular to the main axis.

## Properties
- Properties for flex are divided mainly into two different parts i.e the property for "container" & property for "items".
- So first here are few _container_ properties for flex.

<u>**display**</u>
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/14hibvm6ipue0tft2iqf.png)
 
```
.container {
   display: flex;
}
```
The green background shown in the above image is the main flex container to which the display property of flex is given. It will laid down its children directly.

<u>**flex-direction**</u>

The default property for flex-direction is row. As shown in first example itself

```
.container {
  // possible values
  flex-direction: row/column/row-reverse/column-reverse;
}
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hp9852gmxetuowbzwsxx.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7z29v2vd6ihu3pthhose.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ecmccl0aeublqdz4wql1.png)

The flex-direction property will set the main-axis & items are aligned according to the value of direction.

<u>**flex-wrap**</u>

The default value is "no-wrap" means items will tend to fit itself into a single row or column.

```
.container {
  // possible values
  flex-wrap: no-wrap / wrap / wrap-reverse
}
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zjpgkwkd2t7g8k7l6u4u.png) 

As it's understood from the image the items are squeezed & tend to align & fit themselves into a single row because of default property of "no-wrap".

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e5oc46ul05oatorygexa.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bsdivxmwrpubm6xdzj7y.png)

So by setting _flex-wrap_ property with its value as _wrap_ the items are allowed to fit as much available space to them & it will go to next line since wrapping is allowed it will wrap to multiple lines from top to bottom.

By setting it as _wrap-reverse_ it behaves similar to wrap but in opposite direction i.e bottom to top. 

<u>**justify-content**</u>

This property set alignment along main-axis.

```
.container {
  // possible values
  justify-content: flex-start / flex-end / space-around / space- 
  between / center / space-evenly.
```
 ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8n01shz2n62yf6h1fp3o.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x9fbxk2ykr0ex53hkz9v.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v0xyrr3x77bb5mbirbfn.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ci60k5sqbcls5eldgmni.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0hl1skntq26k01n7gim8.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0hdky1h1hvlswk22gk3s.png)

- flex-start: it is default value items are laid towards starting of flex-direction.
- flex-end: items are laid towards end of flex-direction.
- center: items are placed at the center.
- space-around: items laid down & have equal spaced around them.
- space-between: there is only space between the items of container & not between the borders of container & the items.
- space-evenly: items are equally spaced around the edges & between themselves also.

<u>**align-items**</u>

It sets out alignment along the cross-axis.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lv67zyx0yjf8y3cetx5r.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k0vedbhj848hohb8kcyy.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wvh85wxhlfnddsdcky7f.png
)

```
.container {
  // possible values
  align-items: center / flex-start / flex-end / baseline / stretch
}
```
 
So these are the properties which needs to be used on parent for the flex. You can play around with the given sandbox & learn by changing the values for the above listed properties because _learning while making is best practice_.

https://codesandbox.io/s/nervous-bassi-ckrh4x?file=/src/styles.css
  
PS: Feedback's are welcome!! Catch you next time !!!