Understanding Flexbox with Cats: Part 1 Basics

Kate Efimova on July 29, 2019

Everyone loves cats, right? They are adorable fluffy little beings that enjoy smashing things and not obeying anyone. Well, in this series we'll ma... [Read Full]
markdown guide

I ain't even gonna lie, I clicked here because of cats but I stayed because of the content.


Thanks for the great post. I have a question: in the axis diagram. Shouldn't one axis be labeled with flex-direction: row?


Lol, you're absolutely right! I'll find a better one in a second! :D


Thanks, but ummm... No I don't understand the diagram anymore. 😂😂😂

What's "main" and "cross" or is that "flexbox-speak" I didn't get?

Sorry! Changed it again :) Main axis is similar to x-axis while cross axis represents y-axis


Kate - You'll never guess what article my phone recommended I read.. This very one. Congrats and I miss talking to you today. Great article! Jamie G.


Haha, glad you're still interested in programming and reading articles on the Dev! 😊 Did you decide to spend some time learning development on your own and then come back to Lambda or something different?


I enjoy reading your work and am excited to see where you land. Definitely doing some work on my own now and then will see what happens later. I used to work in Sunnyvale...in 1999 with an internet startup! I miss the area!


Love this a lot! 😁 You've made learning about Flexbox be fun and enjoyable. Really amazed at how you used Kittens as the analogy hehe those stubborn cats XD Can't wait for the next part


Hello Kate ,I just want to ask how can I use this flex box property for 120 flip-cards distributed amongst 20 rows,when I am using
''' display:flex'''
property it is aligning in one straight row ,instead of distributing amongst different row.


I wanted to cover it in the part 2 of this series :) There are various ways to do it that include setting left and right padding on individual cards(lets say there's a class .cards and all cards inside it have a class of .card), so on every .card. You can also set a certain limiting width inside of .cards(or do something like width: 100%; height: auto; padding: 5em;)


Very well explained, my only criticism is that there isn't a part two yet.

Nice work!


Haha, I'll try to compose and finish it in about 2 weeks :)


This instantly clicks with me. Given the assumptions stated upfront, everything that follows fits into a coherent, easily digested learning session. Keep it up Kate!


Awesome article! Cats make it fun to read. Waiting for more! :D

code of conduct - report abuse