CSS - Brief Guide on Flexbox Layout - Part 1
Tags: webdev, beginners, tutorial, css
Published: 2022-04-19 11:12:39

Hello everyone! 👋 Last time I wrote about Grid Box layout, so I will write about Flexbox layout and I will tell you what I know.

## Table of Contents
1. [Introduction to Flexbox](#introduction)
2. [Flex Container](#flexcontainer)
   - [Flex Container Properties](#containerprops)

### Introduction to Flexbox <a name="introduction"></a>

To flex or not to flex, that is the question! I think that Flexbox is really useful when you want to build a responsive website. Flexbox gives you the power to lay out elements the way you want and easily align elements on your web pages and components. It is really easy to center things when you use Flexbox, I will show you how soon. Moreover, Flexbox allow you change the widths and heights of the Flex Items so that it fits the available spaces, this is why it is good for responsive design. Flexbox deals with directional flow of the Flex Items, whether it be row or column direction, so it can be said that Flexbox is a one-dimensional layout. 

The below image shows the main concept of how Flexbox lay out it's Flex Items base on the flow direction. *Note: the main and cross axis switch when you change the flow direction.* 
![Main and Cross Axis of Flexbox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nk48xtgn4v8jely3uk9v.png)
(Credit: main and cross axis image - [css-tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/))

(Story time: when I was interning, I worked on responsive design for an old website, and this website was built before flexbox so I had to do a lot of media queries and changing widths and paddings...😫  However, now with my own projects, flexbox makes it so much easier.)

### Flex Container <a name="flexcontainer"></a>

Anyway, to begin using Flexbox, just slap `display: flex` on your container element, this element will now be known as the Flex Container, and all the **immediate** children of this element will be known as Flex Items.

There are many Flex Container CSS properties that will allow you to move the Flex Items about, lets take a look at them.

As always, I will show some examples with the properties but you really do learn best when you try it out yourself. Lets start with some basic set up, a Flex Container with defined size, and `display: flex` on it. You will notice that, each of the Flex Items loses it's block property and are now lined up in a row next to each other.

```CSS

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

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

```

![Flexbox container](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jvkn156plzzf6k2n7l32.png)

#### Flex Container Properties <a name="containerprops"></a>

The properties I will talk about are `flex-direction`, `flex-wrap`, `justify-content`, `align-items`, `align-content` and `gap`.

There is a bit of a pattern when you start using Flexbox, so don't worry if you can't remember them, you can always look them up or just test them using the DevTool.

- `flex-direction` determines which direction you want the Flex Items to flow, row (default), row-reverse, column or column-reverse. 

Example of changing the `flex-direction` <a name="direction"></a>

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

- `flex-wrap` determines if you want the Flex Items to wrap when there's no more room, the default is no-wrap. Options are wrap, no-wrap and wrap-reverse. This will cause shrinking or overflow if no-wrap is set, depending on the size of the Flex Items.

Example of changing the `flex-wrap` <a name="wrap"></a>

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

- `justify-content` allow you to move the Flex Items and align them on the main axis (horizontal if direction is rows, vertical if direction is column). You can align it to the beginning `flex-start` or end with `flex-end`. Or if you want to center it, you can use `center`. You can also space them out using `space-evenly`, `space-around`, and `space-between`.

Example of changing the `justify-content` <a name="justify"></a>

![Flex justify](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7edvgkm7qagjhu97fc6y.png)
<br>

- `align-items` allow you to move the Flex Items and align them on the cross axis (vertical if direction is rows, horizontal if direction is column). You can align it to the beginning `flex-start` or end with `flex-end`. Or if you want to center it, you can use `center`. You can also set it to `stretch` and take up all of the remaining space of the cross axis (when no width/height is set on the Flex Item).

Example of changing the `align-items` and `justify-content` <a name="align"></a>

![Flex align](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6fgv7la16blujqzie14c.png)
<br>

- `align-content` allow you to move the Flex Container lines and align the Flex Container Rows or Columns if there are additional space. (I don't use this often so I can't explain it very well) 😩.

Example of changing the `align-content` <a name="alignContent"></a>

![Flex align-content](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c7t0srbyz7zl07fbt1kk.png)
<br>
- `gap` set row-gap and column-gap, just like Grid box.

### Summary

Now you know how to start using Flexbox. You can design responsive components and pages, as well as aligning content with `justify-content`, `align-items` and `align-content`. You can also define flow directions and the wrapping behaviour of the flex items using `flex-direction` and `flex-wrap`. Just remember, the two axes are called "main" and "cross", which changes depending on the direction. 

(Bonus: Flex Items themselves can also be Flex Container, just put `display: flex` on it and you can use all the Flex Container properties.)

That's all for today, I wanted to keep my post short and digestible. Next time, I will talk about Flex Items properties and how you can play around with them. As always, please leave comments if you find this helpful, or confusing or just general feedback 😀. If you prefer other resources you can try [W3School](https://www.w3schools.com/css/css3_flexbox.asp) where they have interactive examples or [MDN Docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) for a more detailed explanation of Flexbox.

![Nishinoya](https://i1.sndcdn.com/avatars-ftIhkAXbel2UajX2-JOq3TQ-t240x240.jpg)