Flexbox-zombies

Waylon Walker - Jan 15 '20 - - Dev Community

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.

Image
Lessons learned: Azure Reservations

azure, devops, microsoft
Image
From Concept to Code: Building a Simple Endless Runner Game

beginners, javascript, css, gamedev
Image
Discover the RELX Infinity 2: The Ultimate Vaping Experience with Fast Charging and Flavorful Pods
Image
24 Hours For Improving Head Injury Compensation Claim
Image
What Is An Online Casino?
Image
Day 5: Comments, Escape Sequences & Print Statement | 100 Days Python

programming, coding, beginners, python
Image
The Next Big Thing In The Head Injury Claims Industry
Image
Agen Judi Online Bonus Besar dan Berlimpah
Image
Pediatric First Aid Kit Essentials: What Should Parents Have?
Image
7 Tips About Coffee Maker Drip That Nobody Can Tell You
Image
Online Casinos Thrive Even When The Economy Is In A Recession
Image
What's The Most Common Drip Pot Coffee Maker Debate It's Not As Black And White As You Think
Image
When Should Android Automated Testing and Manual Testing Be Used?
Image
Tehnik Nakal Judi Online yang Dapat Dipakai
Image
The Reasons You Should Experience Leg And Arm Injury Lawyers At The Very Least Once In Your Lifetime
Image
trik mengoptimalkan pendapatan judi slots online
Image
[From Whizlab] AWS Cheatsheet
Image
Indisputable Proof That You Need Drip Coffeee
Image
Jak stworzyć idealne mieszkanie: Przewodnik po aranżacji i dekoracji
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .