Simple CSS Flex Tutorial
Tags: css, flex, tutorial, beginners
Published: 2021-05-05 23:23:31

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kr7cu7vypyw7xdypeet2.png)

Check out **these coding books** [CSS](https://javascriptteacher.com/h/css) ,  [JavaScript](https://javascriptteacher.com/h/jsg) and [Python](https://javascriptteacher.com/h/jsg). Some of them are also available on Amazon if you need extra desk reference.

> Flex is a set of CSS properties that help web designers create layouts. Officially Flex is actually called Flexbox which stands for *flexible box*. It automatically adjusts layout spacing.

Flex automatically adjusts dimensions of your items inside parent container based on browser size, size of neighboring items and space between them. This makes flex an ideal tool for creating responsive website layouts.

Learning as many flex property/value combinations is essential for understanding how it works. So let's get started!

##Parent And Items

Flex block consists of parent container and nested items. Some flex properties should be applied only to parent. While others only to items.

##Main-axis and Cross-axis

Thinking in flex involves knowing about main-axis and cross-axis. Main-axis - the horizontal one - is the default. Placing items inside flex container will automatically align them against main-axis.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zs8azcdrr9hv2ebbgfvj.png)

###CSS Flex properties `justify-content` and `align-content`

Get used to these two properties and make them your second nature!

Along Main-axis you'll use `justify-content` property for creating spacing between items. On Cross-axis you will use `align-content` property to do the same vertically.

However `align-content` only works if there are multiple rows of flex items. (That is, you have more items that can fit into the width of your container and "wrap" onto the next line. You'll need to apply `flex-wrap: wrap` in order for your items to jump to next row.)

##How To Enable Flex On An HTML Element?

Flex can be applied to basic HTML elements that deal with dividing or sectioning your layout into separate blocks.

To make an HTML element behave as a flex container simply apply `display:flex` property to parent:

HTML:
```
<div id = "flex"></div>
```

CSS:
```
div#flex { display:flex }
```

###Populating flex container with items

Now all you have to do is simply nest your flex parent container with as many items as you need. 

```
<div id = "flex">
   <div>A</div>
   <div>B</div>
   <div>C</div>
</div>
```

You will need to apply some basic styles to each item depending on what you're trying to make. That's entirely up to you! In this example `box-shadow` property was used to make the item stand out.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qxk65qe26axlntidq2qq.png)

By default flex will justify content left (value `flex-start`). This means the value `flex-start` is applied to `justify-content` by default.

Now onto the fun part. Aligning items!

Flex has a set of unique values you can assign to `justify-content` property. And for the most part, this is what designing layouts with flex is all about. It's choosing amount of space you want to have between your items.

Let's try this simple example first.

I edited `div#flex` style in the following way:

```
div#flex {
    display: flex;
    justify-content: space-evenly;
}
```

Simply adding `justify-content: space-evenly;` modified our items as follows:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ueqiuf1ny5p9ezj7hdcr.png)

Now there is a multitude of different values you can apply here.

They all produce similar but slightly different spacings.

In the next section of this tutorial I'll go over them with a flex diagram that can help you to quickly understand how they all work.

###Using justify-content

This flex diagram makes it easy to understand how values set to `justify-content` work. To the left you see each value name and to the right the effect it has on spacing between your flex items:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s608tn20n067h1iq9xkf.png)

Description of all `justify-content` values:

* **stretch** Stretch all items to fill 100% of the parent's width
* **space-between** Equal space between all items. No space on outside corners.
* **space-around** Equal space around all items. Half space on the outside corners.
* **space-evenly** Equal space around all items and parent edges.
* **center** Center all items. No space *between* items.
* **flex-end** Align all items right.
* **flex-start** Align all items left. (*Default*.)

Keep in mind `flex-direction: row` is the *default setting*. This is why all items are justified on the horizontal (main) axis. However, it's possible to swap axis by setting `flex-direction` to `column`.

Doing this will not affect `justify-content` in any different way -- it simply gets swapped with cross-axis and becomes the vertical axis -- items will be now spaced vertically. (See next example.)

###Using justify-content with flex-direction: column

This is the same example as above. All we did was set `flex-direction` property to `column`.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fcovbo5q1vuz3leobrbg.png)

###Using `align-content` to create vertical spacing

There may be some confusion at why `align-content` isn't working for your layout. Many try applying this property to parent in hopes of using it as an opposite to `justify-content`.

But there is one gotcha! This property requires more than one row. Otherwise there is no effect.

To make sure your items wrap to the next line, set `flex-wrap` property to `wrap` value in your main container first.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c0c08ckfud30pgzcuz0f.png)

Here 12 items were strategically used to fill up an equal number of lanes.

Let's apply `stretch` value to `align-content` property:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7i3ek0qby36g916nlzx1.png)

This creates a grid-like layout.

####Other Flex References
[CSS Flex Tutorial](https://semicolon.dev/tutorial/css/flex-tutorial) *the complete css flex tutorial*
[Less Common CSS FLex Patterns In 10 Minutes](https://semicolon.dev/tutorial/css/learn-css-flex-patterns-in-10-minutes) *how to make grid and column-based layouts with flex*

Learning flex is an ongoing process, and there is no "one fits all" solution for creating responsive layouts with css flex. Learn from multiple resources.