Flexing Your Muscles 💪 With CSS Flexbox
Tags: flex, css, frontend, tutorial
Published: 2019-05-07 16:33:12

---
title: Flexing Your Muscles 💪 With CSS Flexbox
published: true
description: a beginner introduction to flex in CSS
tags: flex,CSS,frontend,tutorial
cover_image: https://thepracticaldev.s3.amazonaws.com/i/xhaa1iu4k721lxa9a4ia.jpeg
---

{% parler https://www.parler.io/audio/19721053239/0232126ad1378dc918da08e7cfdb79647a3f02e7.b7e54476-aae8-47b2-bee4-103e546a13d4.mp3 %}

**Disclaimer:** 
> Really, who starts an article with a disclaimer? Well, me. I can't even write enough CSS to save my life. This is my second week at lambda school and it has been all shades of awesome. Prior to now, I had this fear for CSS, because it was too hard 😭, thanks to lambda school that fear is now somewhat of an inspiration 💪😊.


To get started, please bear in mind that we would be turning most of your CSS fears to motivational factors, things to push you to want to get better at CSS 💪.

    .johnson-div {
        display: flex;
     } 

Oh, yeah. The code above is all you need to get started with flex, but not all you need to get your site to fully utilize the strength and might of flex, to better get a grasp of concepts discussed, we would be making use of images of some ugly boxes. Take a good look at the image below before jumping to the [Flex Properties section](##Flex Properties)

![div explanation](https://thepracticaldev.s3.amazonaws.com/i/jcjju9xdocfy2x2c2g5w.png)


##Flex Properties:
***- Display:*** This defines a flex container, we have seen this used in our previous code snippet.

    .johnson-div {
        display: flex;
    } 

***- Flex-direction:*** This property is used to specify the direction we want our `container-items` to flow and what their orientation should look like. The flex-direction could have the values of `column`, `column-reverse`, `row-reverse`, `row` which is the default flex-direction. The images below describe how each work.

    .johnson-div {
        display: flex;
        flex-direction: row || row-reverse || column || column-reverse;
    }

![row and column](https://thepracticaldev.s3.amazonaws.com/i/ccrh5xnu41jmh7b4jqpl.png)
![row-reverse and column-reverse](https://thepracticaldev.s3.amazonaws.com/i/k6fjiho7vcfiij18ab3b.png)

***- Justify-content:*** This property helps us distribute the spaces along the main axis among the container items, now the question comes, what is the main axis. To answer those, for a container in flex, we have the `main-axis` and the `cross-axis`. 
 - For `flex-direction: row`, our `main-axis` runs from left to right, while on the `flex-direction: column`, our `main-axis` runs from top to bottom.
 - For `flex-direction: row`, our `cross-axis` runs from top to bottom, while on the `flex-direction: column`, our `cross-axis` runs from left to right.

The image below goes a long way to further describe these concepts:

![main axis and cross axis](https://thepracticaldev.s3.amazonaws.com/i/loudjvo0kvfi46o62u4o.png)

After explaining what the main axis and cross axis are,  let's get back to discussing `justify-content`. 
`justify-content` takes as values, either space between,  space evenly, space around,  flex end,  flex start, center. Below are images illustrating the effect of this property on our container items. 
    
    .johnson-div {
         display: flex;
         flex-direction: row || row-reverse || column || column-reverse;
         justify-content: space-between || space-around || center || space-evenly ||flex-start || flex-end;
    }    

![space-between, space-evenly](https://thepracticaldev.s3.amazonaws.com/i/3pxge9orfi3yrchci40p.png)
![space-around, flex-end](https://thepracticaldev.s3.amazonaws.com/i/bznn3y1sjt5przfgw74w.png)
![flex-start, center](https://thepracticaldev.s3.amazonaws.com/i/zjsmeqzobugkirryfgzh.png)

Below are verbal explanations of the values illustrated using the diagrams:

 - `flex-start(default)`: *container items are placed toward the start line*.
 - `flex-end`: *container items are placed toward the end line*. 
 - `center`: *container items are centered along the line*.
 - `space-between`: *container items are distributed, such that the first item is on the start line, the last item on the end line. Here the spaces aren't equal*.
 - `space-evenly`: *container items are distributed so that the spacing between any two container items is equal*.


***- Align-items:***  This property just like the `justify-content`, helps us distribute space but this time along the cross axis.  It also has its own values like the `justify-content`, some of which are;

    .johnson-div {
         display: flex;
         flex-direction: row || row-reverse || column || column-reverse;
         justify-content: space-between || space-around || center || space-evenly ||flex-start || flex-end;
         align-items: flex-start || flex-end || center || baseline || stretch;
    }    


 - `flex-start`: *Does the same thing, but this time on the cross axis.*
 - `flex-end`: *Does the same thing, but this time on the cross axis.*
 - `center`: *Does the same thing, but this time on the cross axis.*
 - `baseline`: *container items are aligned such that their baselines align.*
 - `stretch(default)`: *stretch to fill the container.*


![stretch](https://thepracticaldev.s3.amazonaws.com/i/x6vf17s0qsoeteouogcf.png).

With the `justify-content` and `align-items`, it's easy to center a container or div comfortably on the webpage just by making the values of both centered. 


***- Flex-wrap:*** By default flex items would all want to stay on one line, which results in the items being shrunk so they can fit into the screen, which at times really appears to be ugly. 
But to solve this and force our items to flow into other lines when it gets to the end of the line, we use another flex property `flex-wrap`. 
`flex-wrap`, has the values: `no-wrap`, `wrap`, `wrap-reverse`. Below is an image illustrating how each is used.

    .johnson-div {
         display: flex;
         flex-direction: row || row-reverse || column || column-reverse;
         justify-content: space-between || space-around || center || space-evenly ||flex-start || flex-end;
         align-items: flex-start || flex-end || center || baseline || stretch;
         flex-wrap: wrap || nowrap || wrap-reverse;
    }     

![flex-wrap images](https://thepracticaldev.s3.amazonaws.com/i/12zjmyntc0kt3feivhja.png)

> Note: There is a shortcut for combining both `flex-direction` and `flex-wrap`, called `flex-flow`. Notice the change in our code when we use it.

    .johnson-div {
         display: flex;
         justify-content: space-between || space-around || center || space-evenly ||flex-start || flex-end;
         align-items: flex-start || flex-end || center || baseline || stretch;
         flex-flow: row wrap || column nowrap || row wrap-reverse || etc;
    } 

> Lastly, there are other properties of flex, you can apply directly to flex items, I would allow you research on those. But if you can't I found this article from [CSS tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) useful. 

I hope you find my article useful too 😊, share and leave comments on improvements I can make to the article. Thanks