Flex It Like a Pro: A Beginner's Guide to CSS Flexbox
Tags: beginners, css, webdev, tutorial
Published: 2024-04-12 07:51:53

CSS Flexbox, short for "CSS Flexible Box Layout," is a layout model in CSS designed to create more efficient and flexible ways to organize and arrange elements in a container. 

Unlike traditional CSS layouts that rely on block and inline directions, Flexbox is based on a single direction (either horizontal or vertical), making it easier to control the alignment and distribution of space among items in a container.


<br><br>

## **Basic and Terminology**

Here's a figure to illustrate the main idea behind the flex layout:


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

**Main Axis:** The main direction in which flex items are arranged in the container (left-to-right or top-to-bottom).
**Main Start | Main End:** The start and end points of the main axis.
**Cross Axis:** The direction perpendicular to the main axis.
**Cross Start | Cross End:** The start and end points of the cross axis.
**Main Size:** The size of a flex item in the main axis (width or height).
**Cross Size:** The size of a flex item in the cross axis (width or height).


---


## **Flexbox Properties**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/azvc9e7tv8me03g5ms8e.png)
<br>

<u>**Properties for the Parent (Flex Container):** </u>



**1. display**
To enable Flexbox, set the `display` property of the container to `flex` or `inline-flex`. The flex value creates a block-level flex container, while inline-flex creates an inline-level flex container.

```
div {
    display: flex;
}
```
<br>
**2. flex-direction**
This property sets the direction of the flex items.
The possible values are :

1. **`row`** (default)
2. **`row-reverse`**
3. **`column`**
4. **`column-reverse`**

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

```
div {
  flex-direction: row | row-reverse | column | column-reverse;
}
```
<br>
**3. flex-wrap**
It determines if flex items wrap onto multiple lines
The possible values are :

1. **`nowrap `** (default)
2. **`wrap `**
3. **`wrap-reverse`**


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

```
.div {
  flex-wrap: nowrap | wrap | wrap-reverse;
}
```
<br>
**4. Justify content**
This property aligns flex items along the **main axis**.
The possible values are :

1. **`flex-start`** (default)
2. **`flex-end`**
3. **`center `**
4. **`space-between`**
5. **`space-around`**
6. **`space-evenly`**


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

```
div {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}
```
<br>
**5. align-items**
This property aligns flex items along the **cross axis**.
The possible values are :

1. **`flex-start`** (default)
2. **`flex-end`**
3. **`center `**
4. **`baseline`**


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

```
div {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}
```
<br>
**6. align-content**
Aligns lines of flex items when there is extra space in the **cross axis**.
The possible values are :

1. **`flex-start`** (default)
2. **`flex-end`**
3. **`center `**
4. **`space-between`**
5. **`space-around`**
6. **`space-evenly`**


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


```
div {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}
```
<br>
**7. gap, row-gap, column-gap**
Explicitly controls the space between flex items.


```
.div {
  display: flex;
  ...
  gap: 10px;
  gap: 10px 20px; /* row-gap column gap */
  row-gap: 10px;
  column-gap: 20px;
}
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bc76rw3zdtkr0qy8366q.png)
<br><br>


<u>**Properties for the Child (Flex items):** </u>

**1. order**
Sets the order of flex items. Default is 0.

```
.item1 {
    order: 2;
}
```

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

<br>
**2. flex-grow**
Controls how much a flex item should grow relative to its siblings. Default is 0.

```
.item2 {
    flex-grow: 2;
}
```

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

<br>
**3. flex-shrink**
Controls how much a flex item should shrink relative to its siblings. Default is 1.

```
.item2 {
    flex-shrink: 0;
}
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1vg1esbgmol8zb8ply6y.png)
<br>

**4. align-self**
Allows flex items to override the container’s align-items property.

```
.item {
    align-self: center;
}
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gdfubgik0sf2h3d844b2.png)
<br>
**5. flex-basis**
Sets the initial size of a flex item before growing or shrinking.

```
.item2 {
    flex-basis: 2;
}
```


<br>

---


## **More Information**
[CSS Flexible Box Layout Module Level 1 (W3C)](https://www.w3.org/TR/css-flexbox-1/): The official specification for CSS Flexbox.
[A CSS Flexbox Cheatsheet (DigitalOcean)](https://www.digitalocean.com/community/cheatsheets/css-flexbox): A handy guide with examples and explanations.
[Centering Things in CSS With Flexbox (DigitalOcean)](https://www.digitalocean.com/community/tutorials/css-centering-using-flexbox): A tutorial on using Flexbox for centering elements.


That's it! You're now equipped with a strong foundation in CSS Flexbox. Let me know if you have any questions or if you need further assistance!

Happy coding! 😊