DEV Community

Waylon Walker
Waylon Walker

Posted on • Originally published at waylonwalker.com

Flexbox-zombies

#flexbox #css

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

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.

<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>
Enter fullscreen mode Exit fullscreen mode

Basic Markup

Base Style 

    .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;
        }
    }
Enter fullscreen mode Exit fullscreen mode

Basic Technique

basic technique

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.

    .flex_container {
                display: flex;
        }
Enter fullscreen mode Exit fullscreen mode

Turn on the Crossbow

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 

.flex_container {
            display: flex;
            flex-direction: row;
    }
Enter fullscreen mode Exit fullscreen mode

row

column 

.flex_container {
            display: flex;
            flex-direction: column;
    }
Enter fullscreen mode Exit fullscreen mode

column

row-reverse 

.flex_container {
            display: flex;
            flex-direction: row-reverse;
    }
Enter fullscreen mode Exit fullscreen mode

row reverse

column-reverse 

.flex_container {
            display: flex;
            flex-direction: column-rerverse;
    }
Enter fullscreen mode Exit fullscreen mode

Column Reverse

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 

.flex_container {
            display: flex;
            justify-content: flex-start;
    }
Enter fullscreen mode Exit fullscreen mode

flex start

flex-end 

.flex_container {
            display: flex;
            justify-content: flex-end;
    }
Enter fullscreen mode Exit fullscreen mode

flex-end

space-between 

.flex_container {
            display: flex;
            justify-content:space-between;
    }
Enter fullscreen mode Exit fullscreen mode

space-between

space-around 

.flex_container {
            display: flex;
            justify-content: space-around;
    }
Enter fullscreen mode Exit fullscreen mode

space-around

space-evenly 

.flex_container {
            display: flex;
            justify-content: space-evenly;
    }
Enter fullscreen mode Exit fullscreen mode

space-evenly

center 

.flex_container {
            display: flex;
            justify-content: center;
    }
Enter fullscreen mode Exit fullscreen mode

center

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 

.flex_container {
            display: flex;
            justify-content: flex-start;
    }
Enter fullscreen mode Exit fullscreen mode

flex-start

flex-end 

.flex_container {
            display: flex;
            justify-content: flex-end;
    }
Enter fullscreen mode Exit fullscreen mode

flex-end

center 

.flex_container {
            display: flex;
            justify-content: center;
    }
Enter fullscreen mode Exit fullscreen mode

center

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.

.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;
     }
Enter fullscreen mode Exit fullscreen mode

Alt Text

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.

.flex_container {
            display: flex;
    }
.item:nth-of-type(3) {
    flex-grow: 1
}
Enter fullscreen mode Exit fullscreen mode

flex-grow

multiple flex-grow

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

.flex_container {
            display: flex;
            justify-content: flex-start;
    }
.item:nth-of-type(3) {
    flex-grow: 1
}
.item:nth-of-type(1) {
    flex-grow: 2
}
Enter fullscreen mode Exit fullscreen mode

multiple flex-grow

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 

.flex_container {
            display: flex;
    }
.item:nth-of-type(3) {
    order: 1
}
Enter fullscreen mode Exit fullscreen mode

order 1

order -1 

.flex_container {
            display: flex;
    }
.item:nth-of-type(3) {
    order: -1
}
Enter fullscreen mode Exit fullscreen mode

order -1

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

wrap 

.flex_container {
            display: flex;
            flex-wrap: wrap;
    }
Enter fullscreen mode Exit fullscreen mode

wrap

10. Aligning wrapped content

applied to the flex container

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

wrap 

.flex_container {
            display: flex;
            height: 700px;
            flex-wrap: wrap;
            align-content: center;
    }
Enter fullscreen mode Exit fullscreen mode

Aligning wrapped content<br>

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 in their git repo.

I found this element inside of the dashboard.
Flexbox in dev.to

And in the color selection element.

dev.to color selection element

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 it at me, or leave em down below.

Check out my other blogs on my personal site.

Top comments (2)

Collapse
 
paco_ita profile image
Francesco Leardini •

Nice article and description!

I features flexbox-zombies in one article, where I also describe other interesting online games we can use to train our CSS skills. Have a look at it if interested.

paco_ita image

💪 Train your CSS skills with online games 👾

Francesco Leardini ・ Nov 15 '19 ・ 4 min read

#design #productivity #webdev #layout
Collapse
 
bcowley1220 profile image
Brendan Cowley •

Great article! I use flexbox every day, either by itself or in conjunction with grid. It's an extremely powerful tool and frankly I'm very confused why there isn't wholesale buy-in from the entire dev community.

Read next

hosseinyazdi profile image

10 Insane Web Design Tools Every Developer Should Know About! 🌟 🔥

Hossein Yazdi -

hosseinyazdi profile image

9 Lesser Known, but Powerful Color Tools (You'll Regret Missing) 🎨🔥

Hossein Yazdi -

jsha profile image

Grid Basics. Track sizes

Julia Shlykova -

softheartengineer profile image

Mastering CSS @property Binding: A Guide for Web Developers

Soft Heart Engineer -