CSS Flexbox: Tutorial and resources:

I have seen display: flex; so many time, not bothering to understand what it meant because I was learning something else, either Javascript or React with deadline. Often I used css templates. So not knowing the foundation of flexbox was extremely frustrating. When I googled how to fix a simple css and followed the stackover flow instruction, the whole look of my app would break. haha. So this was time to build strong foundation.

I really wish I learned how to use flexbox long time ago because I absolutely love flexbox. It’s also extremely easy to learn because there are so many friendly educational games online. Here are my favorite games and list of things I learned from those games.

WHY FLEXBOX?

Flexbox is a one-dimensional layout system that we can use to create a row or a column axis layout. It makes our life easier to design and build responsive web pages without having to use tricky hacks and a lot of float and position properties in our CSS code.

Flexbox Froggy

Click the link above and you will enjoy learning how to use flexbox moving those frogs around the screen. I absolutely love it. I wish I knew this tool when I was teaching kids how to code. Please be aware, because it looks cute, the contents aren’t necessarily cute haha. It guides you to teach sometimes boring coding with fun, colorful, artistic and creative game.

  • justify-content
  • align-items
  • flex-direction
  • order
  • align-self
  • flex-wrap
  • flex-flow
  • align-content
Flexbox Zombies

Flexbox Zombies game delves into more flexbox details. Hence there are more challenges to solve. The story line is hilarious as well so if you want to nerd out for a half day, you can kill all the zombies and conquer flexbox.

Chapter 1: flex-direction

1–1 Aiming East

display: flex;
flex-direction: row;

1–2 Aiming West

flex-direction: row-reverse;

1–3 Aiming South

flex-direction: column

1–4 Aiming North

flex-direction: column-reverse;

* TIP: AIMING NORTH column-reverse

align-items: left-right (flex-start- flex-end)

justify-content: near- far (flex-start — flex end)

Aiming north is the most important point of view to fully understand how this flexbox works. It’s all about where it aiming and the point of view. The align-items is left and right and justify-content is the depth. So imagine you are aiming north first then change the point of view then all the align-items and justify-content will make clearer sense. (this logic doesn’t make sense for row-reverse and column)

Chapter 2: Justify-content

2–1 Justify-content: flex-start; (default)

The items are place toward the start line.

2–2 justify-content: flex-end;

The end is the far from the starting point.

2–3 justify-content: center;

2–4 justify-content: space-between;

justify-content: space-between;

The items are evenly place and there are more spaces between the items and no margins. The first item is at the start line and the last item is at the end line.

2–5 justify-content: space-around;

justify-content: space-around;

this is when there are space around the outskirt of the items

2–6 space-evenly

Chapter 3 Align-items

Depending on the flex-directionAlign-items are simply if the items would be located on the top or bottom(for flex-direction that are row and row-reverse) or (if the flex-direction is column or column-reverse) it would be left or right.

3–1 align-items: flex-start;

3–2 align-items: flex-end;

3–3 align-items: stretch;

3–4 align-items: center;

align-items explained( if the flex-direction is row)

chapter 4 align-self

You can indicate individual items by stating align-self.

chapter 5 flex-grow

flex-grow is all about ratio.

Chapter 6: flex-shrink

flex-shrink: 0; (original size)

flex-shrink:1; ( rate 1 is smaller than 0. This is default)

flex-shrink:2; (rate 2 is smaller than 2. It’s all about ratio)

flex-shrink: 1;
flex-grow: 1;

you can use shrink and grow at the same time. flex-shrink is only utilized when the containing space is smaller than the normal.

Chapter 7: flex-basis

7–1: flex-basis and width

flex-basis is like upgraded width . width: 500px; is similar to flex-basis: 500px; They result the same but with flex you can use flex-shrink and flex-grow.

7–2: flex-basis max and min

Minimum or maximum width will override the flex-basis width. For example if there’re flex-basis: 300px and min-width: 600px, the item width will be 600px.

flex-basis: 300px;min-width: 600px;//result is 600px;

maximum width with flex-basis

flex-basis: 900px;max-width: 400px;//result is 400px;

for flex-direction: column the flex-basis turn as height since the aiming direction changed.

7–3: flex-basis: 100%

The best part of flex-basis is that you can use percentage.

flex-basis: 50%

Also flex-basis is only work with the space that’s provided so if the space is smaller than what flex-basis is assigned, then the item will be assign to what’s available in the space.

7–4: flex-basis: auto

flex-basis: auto (default) it follows the stated width.

7–5: example

boxes width at flex-basis: 100px
.box{

}
.box1{
flex-basis: 100px;
}
.box2{
flex-basis: 200px;
}
.box3{
flex-basis: 300px;
}
when the same boxes grow at flex-grow:1 it expand continuing the same ratio
.box{
flex-grow: 1;
}
.box1{
flex-basis: 100px;
}
.box2{
flex-basis: 200px;
}
.box3{
flex-basis: 300px;
}

7–6: flex properties

.element{
flex: grow shrink basis;
}
.element {
flex: 1 1 300px;
}

This means that the flex-grow is at 1, flex-shrink is at 2, and flex-basis is at 300px.

chapter 8: order

Order is all about order. The number doesn’t matter but it’s all about the greater or less number.

chapter 9: flex-wrap

chapter 10: align-content

align-content

align-content is for multi line flexible boxes. It has no effect when items are in a single line. It aligns the whole structure according to its value.

chapter 11: flex-shorthand

flex: flex-grow flex-shrink flex-basisex) flex: 1 1 autoflex: auto same as 
flex: 1 1 auto
flex:nonesame as
flex: 0 0 auto
flex-flow: flex-direction flex-wrapex) flex-flow: row-reverse wrap;

chapter 12: to the death

Hint for 12.9: it’s really tricky. I did everything right and had put Dave’s order at 3 but it wouldn’t kill Dave! so I looked it up and I had to put Dave’s order at 1.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store