# How to easily understand Flexbox CSS - (Part 1)

In this mini-series, I will be taking you through how to use flexbox CSS, in a simple, easy to understand way. You can really empower your projects and websites with the use of flexbox CSS and reduce your lines of code drastically. I have also released a video-based tutorial series over on my [YouTube](https://bit.ly/alanmontgomerycoding) so if you'd prefer a video, check that below! Ok... Let's get into it.

%[https://www.youtube.com/watch?v=MEWWFZx3h44]

# What is Flexbox CSS?
Flexbox CSS is a one dimensional layout model/method used for laying out items (HTML elements) in a row or column fashion (horizontal or vertical).

## Why Flexbox CSS?
Long gone are the days of using `float` and `position` in CSS to create layouts and responsive layouts. Utilising flexbox allows you to create fully **responsive**, mobile first layouts without needing to write lots of different media queries.

## Display

The most important CSS property in flexbox is the **display** property. This is how we define a "flexbox container". Familiar display properties include _block_, _inline_, _inline-block_ etc etc. Flex is no different, it can be defined like this:

```css
.container {

    display: flex;
}
```

## Container
```html
<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
```
Our flex container is typically a block level element, usually like a div for example. Refer to the below image; I have defined a flex container and inside my flex container, I have three more divs.

![Flexbox container / Flex container](https://cdn.hashnode.com/res/hashnode/image/upload/v1604881496142/fnYjCju9S.png)

## Items
These are called flex items. Each child inside a flex container is referred to as an "item". You can style these individually again, using flexbox CSS if wanted and we'll get into the specifics of this in the next part.
![Flexbox items / Flex items](https://cdn.hashnode.com/res/hashnode/image/upload/v1604881547911/oHOA4hd7z.png)

## Flex Direction
```css
.container {

    display: flex;
    flex-direction:
}
```
The next important CSS property in terms of flexbox is the `flex-direction` property. This allows you to specify which direction you want to place the items inside the flex container. There are four values which can be used for the `flex-direction` property, either in a row or a column (_e.g. horizontally or vertically_).

### Row
```css
.container {

    display: flex;
    flex-direction: row;
}
```
By default, a flex container will automatically have the flex direction of row. Items inside a row direction flex container will be displayed *left to right* (LTR), your first item will be the first placed element on the display.

![Flex direction row](https://cdn.hashnode.com/res/hashnode/image/upload/v1604881578319/WinXtcAhZ.png)

### Row Reverse
```css
.container {

    display: flex;
    flex-direction: row-reverse;
}
```
The `row-reverse` value for `flex-direction` is similar to the `row` value, however the items inside a row-reverse direction flex container will be displayed *right to left* (RTL), so your first item will now become the last for example.

![Flex direction row-reverse](https://cdn.hashnode.com/res/hashnode/image/upload/v1604881606985/r6yklzUvS.png)

### Column and Column Reverse
```css
.container {

    display: flex;
    flex-direction: column | column-reverse;
}
```
The next type of `flex-direction` you can specify is in the vertical axis in the form of columns. First of all with the `column` value, similar to the `row` value but placed _top to bottom_ (TTB). Alternatively you can use the `column-reverse` value which again, is similar to `row-reverse` but displayed _bottom to top_ (BTT).

![Flex direction column and column reverse](https://cdn.hashnode.com/res/hashnode/image/upload/v1604881638561/5U3hUwFeJ.png)

Hope you enjoyed part 1 of my easy to understand flexbox CSS tutorial. It really is that simple to get started using it. In the next part we'll look at some more specific properties we can use to `justify-content` to space out flex items inside our flex containers!

Please leave a comment and a reaction to this post if you enjoyed it! Also, I have a **YouTube** channel where I'm posting lots of coding tutorials, tips, tricks, reviews and more, would love to see you there:

%[https://bit.ly/alanmontgomerycoding]

See you in the next part!