Flexbox-zombies
Tags: flexbox, css
Published: 2020-01-15 01:18:35

---
canonical_url: https://waylonwalker.com/blog/flexbox-zombies/
---

# Flexbox-zombies


This post was originally posted in my personal blog in April 2018 https://waylonwalker.com/blog/flexbox-zombies/.  The screenshots were taken directly from the site.


I recently finished up the flexbox-zombies course to learn more about flexbox, and to become proficient with it.  I can truly say that this course has changed the way that I create layouts.  Flexbox is very intuitive now.  What this course does really well at is explaining the concepts and hitting you with a ton of examples that you can work through really quickly.

![flexbox-zombies](https://thepracticaldev.s3.amazonaws.com/i/5ozlmucdqrlnaqovzvpi.gif)
> A clip from the final round against Dave


## Basic Setup

Flexbox requires a wrapper container to work  I will refer to this as the  flex container, and the items in that container as items.

### Markup

I will use the following markup throughout the article, each with different css applied.


**note**  The animated container is inspired by the flexbox-zombies course.  I really like how it allows you to see the responsiveness of each layout.  In the early example the reasoning may not be aparent, but as we go along some of the flexbox parameters will make more sense if we are viewing them on a dynamic layout since flexbox is designed for building responsive design.


``` html
<div class='flex_container'>
    <div class='item'>1</div>
    <div class='item'>2</div>
    <div class='item'>3</div>
    <div class='item'>4</div>
</div>
```

![Basic Markup](https://thepracticaldev.s3.amazonaws.com/i/a6k5t68cyrqixsmeg53d.gif)


### Base Style
```css
    .item {
        color: #6394C8;
        font-size: 1.5rem;
        padding: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100px;
        width: 100px;
        background: #351D57;
        margin: 5px;
        border: 2px solid #A83E75;
        box-shadow: 5px 5px 10px -5px rgba(0, 0, 0, .6);
    }

    .flex_container {
        padding: 1rem;
        box-shadow: 5px 5px 10px -5px rgba(0, 0, 0, .6);
        background: rgba(99, 148, 200, .2);
        animation: animate_container 2s cubic-bezier(.66, -0.0, .28, 1.0) infinite both alternate;
    }

    /* Animate the .flex_container to show responsiveness */

    .flex_container:hover {
    /* But not on hover, let the user pause the annimation*/
        animation: none 
    }

    @keyframes animate_container {
        0%{
            width: 95%;
        }

        20% {
            width: 95%;
        }

        80% {
            width: 200px;
        }

        100% {
            width: 200px;
        }
    }
```
## Basic Technique

![basic technique](https://thepracticaldev.s3.amazonaws.com/i/cnbh3y9ljr5pr3xxe6jv.png)

### 1. Turn on the crossbow

_applied to the flex container_  
`display: flex;`

Turning on flexbox on the flex container will cause all child elements to align in a row at the top left corner of the parent container.  By defualt they will shrink to the minimum content size, but not automatically grow larger than their specified size.

``` css
    .flex_container {
                display: flex;
        }
```

![Turn on the Crossbow](https://thepracticaldev.s3.amazonaws.com/i/uxg3z3kg2x47hcyevg3a.gif)



### 2. Aim it if necessary
_applied to the flex container_  

This parameter determines the direction that the flexbox container will orient the flex items.

**example** `flex-direction: row` 
**options** = `('row'(default), 'column',  'row-reverse', 'column-reverse')`

#### row

``` css
.flex_container {
            display: flex;
            flex-direction: row;
    }
```
![row](https://thepracticaldev.s3.amazonaws.com/i/uxg3z3kg2x47hcyevg3a.gif)

#### column


``` css
.flex_container {
            display: flex;
            flex-direction: column;
    }
```
![column](https://thepracticaldev.s3.amazonaws.com/i/9kav18svupb7oafxx82w.gif)

#### row-reverse


``` css
.flex_container {
            display: flex;
            flex-direction: row-reverse;
    }
```
![row reverse](https://thepracticaldev.s3.amazonaws.com/i/j4a59xucrtkwby1j5y3o.gif)

#### column-reverse


``` css
.flex_container {
            display: flex;
            flex-direction: column-rerverse;
    }
```

![Column Reverse](https://thepracticaldev.s3.amazonaws.com/i/v6z0iyzhffdaf8dio75e.gif)


### 3. Line them up along the red Justify Laser
_applied to the flex container_  

This parameter determines justification of the flex items within the flex container.  Think spacing or positioning around the flex items.  

**example** `justify-content: flex-end;` 
**options** = (`flex-start`, `flex-end`, `space-between`, `space-around`, `space-evenly`, `stretch`, `center`, `start`, `end`, `left`, `right`)


#### flex-start

``` css
.flex_container {
            display: flex;
            justify-content: flex-start;
    }
```

![flex start](https://thepracticaldev.s3.amazonaws.com/i/9o2e4afush2nhm5w0www.gif)

#### flex-end

``` css
.flex_container {
            display: flex;
            justify-content: flex-end;
    }
```


![flex-end](https://thepracticaldev.s3.amazonaws.com/i/2xwnhgdkg0dwiqeug0vj.gif)


#### space-between

``` css
.flex_container {
            display: flex;
            justify-content:space-between;
    }
```
![space-between](https://thepracticaldev.s3.amazonaws.com/i/zap9d35bl45no85z70d1.gif)

#### space-around

``` css
.flex_container {
            display: flex;
            justify-content: space-around;
    }
```

![space-around](https://thepracticaldev.s3.amazonaws.com/i/0flyza6fq67ly4vz1lh6.gif)

#### space-evenly

``` css
.flex_container {
            display: flex;
            justify-content: space-evenly;
    }
```

![space-evenly](https://thepracticaldev.s3.amazonaws.com/i/z1z2dc9h3ngooigcxwmd.gif)

#### center

``` css
.flex_container {
            display: flex;
            justify-content: center;
    }
```

![center](https://thepracticaldev.s3.amazonaws.com/i/zbzsi4701ezpup9jsau9.gif)


### 3b. Align them along the  blue Alignment Laser
_applied to the flex container_  
* `align-items: flex-end;`
* options = ('flex-start', 'flex-end', 'normal', 'end', 'self-start', 'self-end', 'center', 'start' 'end')  

#### flex-start

``` css
.flex_container {
            display: flex;
            justify-content: flex-start;
    }
```

![flex-start](https://thepracticaldev.s3.amazonaws.com/i/huy92vqqzpo7eniwx4ar.gif)

#### flex-end

``` css
.flex_container {
            display: flex;
            justify-content: flex-end;
    }
```

![flex-end](https://thepracticaldev.s3.amazonaws.com/i/704ap7bktwdgmg9zk3ky.gif)

#### center

``` css
.flex_container {
            display: flex;
            justify-content: center;
    }
```

![center](https://thepracticaldev.s3.amazonaws.com/i/011tf7zjtjwlbplrehfc.gif)


### 4. Take care of any one-off alignments  
_applied to items_


* `align-self: flex-start;`
* options = (`'flex-start'`, `'flex-end'`, `'normal'`, `'end'`, `'self-start'`, `'self-end'`, `'center'`, `'start'`, `'end'`)


#### combine

the align-self property is used to take care of one off alignments and is applied to the item itself.  All of the parameters are the same as `align-items`.  In this example we will apply all of the previous example alignment types into one.


``` css
.flex_container {
    display: flex; 
     } 
.item:nth-of-type(1){
     align-self: flex-start  
     }
.item:nth-of-type(2){
     align-self: center
     }
.item:nth-of-type(3){
     height: auto; align-self: stretch;
     }
.item:nth-of-type(4){
     height: auto; align-self: flex-end;
     }
```

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/uv5am9f63c670fbnkg6k.gif)

### 6. growth along the red Justify Laser  
_applied to items_
* `flex-grow: 1`


#### flex-grow

By setting `flex-grow: 1;` on item `3` it will take up any available free space.

``` css
.flex_container {
            display: flex;
    }
.item:nth-of-type(3) {
    flex-grow: 1
}
```

![flex-grow](https://thepracticaldev.s3.amazonaws.com/i/p27di79zmlhaw7tztf8i.gif)

#### multiple flex-grow

By setting `flex-grow: 2;` on item  `1` will take up the available free space 2x faster than `3`

``` css
.flex_container {
            display: flex;
            justify-content: flex-start;
    }
.item:nth-of-type(3) {
    flex-grow: 1
}
.item:nth-of-type(1) {
    flex-grow: 2
}
```

![multiple flex-grow](https://thepracticaldev.s3.amazonaws.com/i/9bqmi75a6vwsmuq0ns1l.gif)

### 7. setting length of items along the red Justify Laser 

_applied to items_  
_in order of importance_  

* `min-width`
* `max-width`
* **`flex-basis`**
* `width`

### 8. Out of Order

_applied to items_
_behaves similar to z-index_

* `order` - takes an integer value


#### order 1

``` css
.flex_container {
            display: flex;
    }
.item:nth-of-type(3) {
    order: 1
}
```

![order 1](https://thepracticaldev.s3.amazonaws.com/i/jdlfwp62w9oxga41v27u.gif)

#### order -1

``` css
.flex_container {
            display: flex;
    }
.item:nth-of-type(3) {
    order: -1
}
```

![order -1](https://thepracticaldev.s3.amazonaws.com/i/ng0q2nq22hncc80d221k.gif)


### 9. Get your own Line

_applied to the flex container_ 


* `flex-wrap` - options= `(wrap, nowrap(default))`
* prefers wrap over shrink
* but will still shrink after fully wraped

![get on your own line](https://thepracticaldev.s3.amazonaws.com/i/8iowoewtsywl1lcrxt3u.gif)

#### wrap

``` css
.flex_container {
            display: flex;
            flex-wrap: wrap;
    }
```

![wrap](https://thepracticaldev.s3.amazonaws.com/i/ra19sfdvnsy15v22hymp.gif)

### 10. Aligning wrapped content

_applied to the flex container_ 


*  `align-content` - same specs as align-items but works on wrapped content.

#### wrap

``` css
.flex_container {
            display: flex;
            height: 700px;
            flex-wrap: wrap;
            align-content: center;
    }
```

![Aligning wrapped content
](https://thepracticaldev.s3.amazonaws.com/i/cocwysypz9jkil008cfc.gif)

### 11. Shortcuts

**flex**  
_applied to the flex items_
* `flex: grow, shrink, basis`
* defaults - `flex: 1 1 0px`
* setting `flex: none` is equivalent to `flex: 0 0 auto`


**flex-flow**

_applied to the flex container_

* `flex: flex-direction flex-wrap`

### Chapter 7: In a Perfect World (flex-basis)

`flex-basis`
* Starting point, ideal size, hypothetical size
* applied to items
* overrides width
* shinks if necessary

When Shooting Horizontally it controls width

When Shooting Vertically it controls height


# Do **YOU** still use flexbox in 2020?

## @ThePracticalDev Does

Now that they are open source you can [search for yourself](https://github.com/thepracticaldev/dev.to/search?p=1&q=flex&unscoped_q=flex) in their git repo.

I found this element inside of the dashboard.
![Flexbox in dev.to](https://thepracticaldev.s3.amazonaws.com/i/os4bz51qnrlg26n5u6uz.png)


And in the color selection element.

![dev.to color selection element](https://thepracticaldev.s3.amazonaws.com/i/697o6194ib29d3t0n1y9.png)




## I do

I made this post/nodes nearly 2 years ago as I was learning flexbox with the flexbox zombies course and it has really stuck with me.  I feel like most of it has engrained into my brain and feels second nature, so much so that I rarely find myself reaching for grid 😲.  In the off occasion that I need a visual refresh this post has been super helpful for me.


[Tweet](https://twitter.com/intent/tweet?text=%22Flexbox-zombies%22%20by%20@_WaylonWalker%20%23DEVcommunity%20https://dev.to/waylonwalker/flexbox-zombies-2o00) it at me, or leave em down below.



Check out my other [blogs](https://waylonwalker.com/blog) on my personal site.