Understanding Flexbox with Cats: Part 1 Basics

Everyone loves cats, right? They are adorable fluffy little beings that enjoy smashing things and not obeying anyone. Well, in this series we'll make an assumption that suddenly they will listen to all commands given the magical phrase, display: flex;. "Understanding Flexbox with Cats" will use the analogy of cats and boxes to teach concepts like the CSS box model, flexbox positioning, and provide some valuable tips on the use of containers. Please keep in mind that this series assumes that a reader already has some basic understanding of HTML and CSS.

In part one, we will mainly focus on a reader's thorough understanding of how flexbox positioning works with multiple containers. This part is for two types of people: those who never truly understood flexbox and those who love reading how someone can creatively use an analogy when connecting two seemingly unrelated things.

"Flexbox with Cats" Contests

• Part 1: Flexbox basics
  • Beginner-friendly introduction to CSS's box model and positioning of divs
• Part 2: Think in "boxes"
  • An article describing how to recognize containers("divs") when working with a provided design and how to implement the desired positioning.
• Part 3: Advanced Flexbox and CSS
  • Covering everything from using flexbox in order to make a website responsive all the way to how to create your own designs. We'll also get to look at real-world implementations of everything learned throughout this series.

Introduction to "Cats and Boxes"

Let's imagine a situation where suddenly you found yourself being responsible for three little kittens. As you see your apartment slowly turning into a disordered mess due to those tiny energized cats walking all over the place—and scratching on surfaces they shouldn't be scratching—you slowly begin to panic. What's a possible solution to all this chaos? 🤔

If you thought about trying to limit cats' space, you were correct! Just like in real life, we first have to set up a box(also known as a <div> element) before putting any cats(representation for any content, like images, text, lists, etc) into it. It would not make sense to first put kittens on the ground and then add a box on top of them, so try to avoid doing that when using flexbox too!

Setting up a Default Box

Keeping that in mind, lets set up our HTML. Right now it is important to notice that cats(3 images) were already placed in a box(div with a class of cat-box). You might wonder why are they all gathered in one place, well, it's time to introduce some kitten logic!

You see— as their default behavior, cats love to cuddle. Especially considering that those kittens are in an unfamiliar environment where they were just placed seconds ago after ruining an entire apartment. They're not sure how to act, so they would just always stay close next to each other in the top left corner, warming each other up and feeling safe.

Introducing Flexbox

Cats generally consider themselves to be of high esteem, so in order for them to obey, we'll have to give a command of display: flex; to the box kittens are in. Someone might wonder, "why not give it to every single cat individually instead?" Well, this is because the box holds higher authority over cats due to restricting the space they can move in! And cats — being proud aristocrats — only listen to higher authority. Nothing will happen if you'll try to add display: flex; to any of the cat images; they're very stubborn (More on the why later, it is related to thinking outside of the box! pun intended)

What display flex will do is tell cat images to position themselves in a row and start listening to other commands. As you just thought, they were originally positioned in a row, so the only difference that will be noticed is a lack of space between pictures.

Now, let's pretend that a perfectionist friend comes over to your apartment, and wants to align all kittens and the box according to the center of that room. There are two directions we'll have to align them in: horizontal(main axis) and vertical(cross axis). Here's a well-done visual representation of the axis:

First, let's align them according to y-axis by attaching align-items: center; to the .cat-box. Then, let's also position them correctly on x-axis by adding justify-content: center;

At this point, these CSS properties were added to .cat-box:

  display: flex;
  align-items: center;
  justify-content: center;

As you have probably noticed, even though cats are now aligned centrally, the box holding them is still not where it needs to be. The perfectionist friend gets upset and, not trusting you anymore with such an "important" responsibility, starts to mess with cat positioning himself.

Here's what he gets by trying to align all containers on the body of CSS by attaching the same properties we just attached to .cat-box

What he doesn't yet realize is that all furniture and other items like Nintendo Switch and MacBook Pro were suddenly centered in the apartment too, which is definitely an unwanted behavior! It is generally considered a bad practice to attach flexbox properties to the body.

So in order to align both kittens and the box to the center of our screens, we'll have to create another <div> with a class of .outer-container and wrap it around the existing content. Why do we need that? Let's dive deeper into why by breaking down an example!

Take a look at this dev.to component that can be found on their main page. On the right side is a demonstration of how many containers(boxes) are currently used to make it work. Notice how they're nested — meaning inside each other. Light color that looks similar to a highlighter is there to portray inner padding of each container.

All flexbox manipulations are always one layer deep, meaning it only affects closest child boxes. For example, the purple container can only manipulate three inner containers but not any <h> or <a> elements inside of them. Whereas the the dark blue container has an ability to do something with it's anchors by attaching flexbox into itself(notice that display: flex would be attached to the container when you want to manipulate elements inside of it).

If you haven't noticed the pattern yet: we wanted to align kittens => gave a command to their closest outer box; desired to manipulate that same box => created a container outside of it that wraps the whole content. You would not be able to control cats from the .outer-container. Thus, try to remember a phrase think outside of the box since if you want to manipulate certain elements, you need to find the closest outer container in order to assign flexbox properties to it.

Keeping that in mind, the reason why all anchors in a dark blue container are positioned in a column is because they were given a flexbox property of flex-direction: column; through inheriting it from their purple parent container. Take a look at what happens to this dev.to component if flexbox direction is changed to row on the purple container. Can you still recognize the same boxes without lines and highlights? 😉

Going back to the visual example with cats, it now supposed to make sense why we need an extra wrapping container: otherwise there's no way to control the box that holds the cats. All there's left to do is add an extra <div> on HTML, give it a class, declare flexbox central positioning and add a limited size on that class. There are ways of making a container change it's size according to the stretching and squishing of content inside of it but we'll be diving into it more in Part 2 and 3 of this series. You're free to take a look at the finished code on this CodePen:

We can have some fun playing with various others justify-content, here's a visual representation of how it changes things using this gif:

Conclusion

Hopefully an analogy of using cats and boxes helped you to grasp concepts of flexbox better. All terminology was on purpose simplified to focus solely on the importance of understanding. In addition, I'd love to hear your thoughts on Part 1: what did go well as well as what could have been done better? Do keep in mind that it is my first ever article written! Here's a repository with markdown of this article, you're welcome to create any and all pull requests!
https://github.com/kefimochi/Flexbox-with-cats/blob/master/Part%201/Basics.md