Flexbox 30 by Samantha Ming
September 24, 2019🚀 Flexbox30 by Samantha
#Flexbox30 Day 1 ✨
— Samantha Ming (@samantha_ming) September 1, 2019
Before Flexbox, we were mainly using floats for layout. And for those CSS developers, we all know the frustrations and limitations of the old way -- especially to vertically center inside a parent. Ugh, that was so annoying! Not anymore! #Flexbox for the win! pic.twitter.com/fIjaBaRMeg
#Flexbox30 Day 2 ✨
— Samantha Ming (@samantha_ming) September 2, 2019
In order to get Flexbox to work, you need to set up the Parent-Child relationship. The parent is the flex container, and everything within it is the children or flex items. pic.twitter.com/v99C5SWvv3
#Flexbox30 Day 3 ✨
— Samantha Ming (@samantha_ming) September 3, 2019
One important thing I want to point out is that the flex container only wraps around its immediate children. It doesn't wrap beyond one layer deep. So there is NOT a grandchildren or grand-grandchildren relationship. Only Parent ↔️ Immediate Children! pic.twitter.com/gWVXuodFhK
#Flexbox30 Day 4 ✨
— Samantha Ming (@samantha_ming) September 4, 2019
Flexbox operates in a 2 axes system: main & cross axis. The main axis is your defining direction of how your flex items are placed in the flex container. Determining the cross axis is very simple, it's in the direction that's perpendicular to your main axis👍 pic.twitter.com/qRO4GSUqqm
#Flexbox30 Day 5 ✨
— Samantha Ming (@samantha_ming) September 5, 2019
Let's check out the anatomy of our Flexbox. On each axis, there is a start and an end. If it's on the main axis, the starting position is called "main start" and if the ending position is called "main end". The same concept applies to the cross axis 👍#CSS pic.twitter.com/U6MeWTAJru
#Flexbox30 Day 6 ✨
— Samantha Ming (@samantha_ming) September 6, 2019
Now you know Flex operates in a Parent-Child relationship. So we need 2 entities involved to get this tango started. And each entity will have its own set of unique CSS properties that can be applied to them. Upcoming, we’ll focus on the parent properties 🤰 pic.twitter.com/GmOgihpsvl
#Flexbox30 Day 7 ✨
— Samantha Ming (@samantha_ming) September 7, 2019
To get this Flexbox party started, we apply flex to the display property on the parent element. Bam! Now all its immediate children will become flex items 🎊
There are 2 types: flex vs inline-flex. Similar to block and inline, more on this tomorrow😉 pic.twitter.com/tzEGJtxrMZ
#Flexbox30 Day 8 ✨
— Samantha Ming (@samantha_ming) September 8, 2019
Block element takes up the entire width of the container. They look like building blocks where each block is stacked on each other. Whereas inline element only takes up the space it needs. So they appear to be in a line, or side by side of each other. pic.twitter.com/7s9lTFi5Fb
#Flexbox30 Day 9 ✨
— Samantha Ming (@samantha_ming) September 9, 2019
Here's how we define the position of our main axis. Row is where the main axis is horizontal. Column is where it's vertical. Remember there's a main start & end. Just add a "reverse" suffix to set our "main start" in the reverse direction. Pretty cool eh 👍 pic.twitter.com/CeIxL946wU
#Flexbox30 Day 10 ✨
— Samantha Ming (@samantha_ming) September 10, 2019
By default, flex items will try to shrink itself to fit onto one line, in other words, no wrap.
However if you want the flex items to maintain its size and have the overflow spread on multiple lines in the containers, then you can turn on wrap. pic.twitter.com/uue6p4zwKm
#Flexbox30 Day 11 ✨
— Samantha Ming (@samantha_ming) September 11, 2019
So we've learned flex-direction and flex-wrap. If you understand those two, you'll get flex-flow! Because it's just a shorthand for these two properties 👏
You can set both properties at the same time. Or you can just pass one of them 👍#CodeNewbie #CSS pic.twitter.com/1pWynMxcUF
#Flexbox30 Day 12 ✨
— Samantha Ming (@samantha_ming) September 12, 2019
Here comes the fun part. This is the property that sets alignment along the main axis. In this example, the main axis lies horizontally (flex-direction is set to row). Set your desire layout and flexbox will take care of it for you, it’s that simple folks 🤩 pic.twitter.com/5rov5iLsDj
#Flexbox30 Day 13 ✨
— Samantha Ming (@samantha_ming) September 13, 2019
There's a subtle difference between space-around and space-evenly. The empty spaces in space-evenly are always equal. Whereas space-around, only the inner space are equal and the first & last item will take up 1/2 the space, making it appear more spread out. pic.twitter.com/Y5AIGQcwas
#Flexbox30 Day 14 ✨
— Samantha Ming (@samantha_ming) September 14, 2019
The main axis can also lie vertically. In that case, flex-direction is set to column. Here's how the flex items will be aligned in that instance.#CodeNewbie #100DaysOfCode #301DaysOfCode pic.twitter.com/CkAHAkr31g
#Flexbox30 Day 15 ✨
— Samantha Ming (@samantha_ming) September 15, 2019
So justify-content controls how items are laid out on the main axis. What about the layout in the cross axis? Don't worry, that's where align-items come into play. #CodeNewbie #100DaysOfCode #301DaysOfCode pic.twitter.com/Zk3xaRNgYn
#Flexbox30 Day 16 ✨
— Samantha Ming (@samantha_ming) September 16, 2019
The baseline value is a bit tricky. Baseline has to to with the typography. It is the imaginary line where the text sits. You really only notice it if the text sizes are different. If the sizes are different, you can use baseline to uniformly align them 👍 pic.twitter.com/ougFHTwiJR
#Flexbox30 Day 17 ✨
— Samantha Ming (@samantha_ming) September 17, 2019
Now let's take a look at how our flex items are aligned if the cross axis is sitting horizontally (flex-direction: column)#CodeNewbie #100DaysOfCode #301DaysOfCode pic.twitter.com/SUFq43Tjkh
#Flexbox30 Day 18 ✨
— Samantha Ming (@samantha_ming) September 18, 2019
Remember we had flex-wrap where flex items wrap on separate lines. With align-content we can control how those row of items are aligned on the cross axis.#CodeNewbie #100DaysOfCode #301DaysOfCode pic.twitter.com/aXm8WGApUk
#Flexbox30 Day 19 ✨
— Samantha Ming (@samantha_ming) September 19, 2019
Yay, you did it! We made it through the parent properties. Up next, let dig into the child properties. Take a breather today, tomorrow we go full speed again 🏎#CodeNewbie #100DaysOfCode #301DaysOfCode pic.twitter.com/nMSAtnpDJb
#Flexbox30 Day 20 ✨
— Samantha Ming (@samantha_ming) September 20, 2019
By default, flex items are displayed in the same order they appear in your code. But what if you want to change that? No problem! Use the order property to change the ordering of your items 🔢#CodeNewbie #100DaysOfCode #301DaysOfCode pic.twitter.com/VN7kCTTKr8
#Flexbox30 Day 21 ✨
— Samantha Ming (@samantha_ming) September 21, 2019
I mentioned in the beginning that Flexbox is great for responsive design. This is where it shines. "flex-grow" allows our flex item to grow if necessary. So if there is extra free space in my container, it will automatically fill that space! CRAZY 🤯 pic.twitter.com/HlJPMYwXBO
#Flexbox30 Day 22 ✨
— Samantha Ming (@samantha_ming) September 22, 2019
Being able to grow & fill the free space is so cool. But I always wonder how does the browser calculate the width. So let's look at the math. You don't need to know this, but if you're a nerd like me, you might find this interesting😂#CodeNewbie #CSS pic.twitter.com/vDNDMgovJM
#Flexbox30 Day 23 ✨
— Samantha Ming (@samantha_ming) September 23, 2019
So flex-grow will expand to fill the extra space if there is any. The opposite of that is flex-shrink. What happens when you run out of space. This is the property that controls how much your flex items should shrink to fit 👍 pic.twitter.com/4cOdkVAk6V
#Flexbox30 Day 24 ✨
— Samantha Ming (@samantha_ming) September 24, 2019
Another optional knowledge. The math behind flex-shrink is a bit more complicated then flex-grow. But if you're like me and is curious how the browser calculates flex-shrink. Join me in this rabbit hole 😂 pic.twitter.com/C0DvSqPMp0
#Flexbox30 Day 25 ✨
— Samantha Ming (@samantha_ming) September 25, 2019
Flex-basis is the property to set the width of your flex items. You might be tempted to use "width". But the browser will always look for flex-basis first. Only if you give it no choice, then it has to use width. So do it the proper way & use flex-basis 👍 pic.twitter.com/icXBxvBQLb
