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.
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>
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;
}
}
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;
}
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;
}
column
.flex_container {
display: flex;
flex-direction: column;
}
row-reverse
.flex_container {
display: flex;
flex-direction: row-reverse;
}
column-reverse
.flex_container {
display: flex;
flex-direction: column-rerverse;
}
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;
}
flex-end
.flex_container {
display: flex;
justify-content: flex-end;
}
space-between
.flex_container {
display: flex;
justify-content:space-between;
}
space-around
.flex_container {
display: flex;
justify-content: space-around;
}
space-evenly
.flex_container {
display: flex;
justify-content: space-evenly;
}
center
.flex_container {
display: flex;
justify-content: 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;
}
flex-end
.flex_container {
display: flex;
justify-content: flex-end;
}
center
.flex_container {
display: flex;
justify-content: 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;
}
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
}
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
}
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
}
order -1
.flex_container {
display: flex;
}
.item:nth-of-type(3) {
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
wrap
.flex_container {
display: flex;
flex-wrap: 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;
}
11. Shortcuts
flex
applied to the flex items
flex: grow, shrink, basis
- defaults -
flex: 1 1 0px
- setting
flex: none
is equivalent toflex: 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.
And in the 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)
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.💪 Train your CSS skills with online games 👾
Francesco Leardini ・ Nov 15 '19 ・ 4 min read
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.