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.
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-contentalign-itemsflex-directionorderalign-selfflex-wrapflex-flowalign-content
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;
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;
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;
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
.box{
}.box1{
flex-basis: 100px;
}.box2{
flex-basis: 200px;
}.box3{
flex-basis: 300px;
}
.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 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 autoflex:nonesame as
flex: 0 0 autoflex-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.
