DEV Community

Cover image for Understanding Flexbox with Cats: Part 1 Basics

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...
Collapse
 
kristijanfistrek profile image
KristijanFištrek

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

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

Is the cat dead or alive or both?

Collapse
 
fittonjj profile image
Jamie Geisler

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.

Collapse
 
kefimochi profile image
Kate Efimova

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?

Collapse
 
fittonjj profile image
Jamie Geisler

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!

Collapse
 
dploeger profile image
Dennis Ploeger

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

Collapse
 
kefimochi profile image
Kate Efimova

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

Collapse
 
dploeger profile image
Dennis Ploeger

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?

Thread Thread
 
kefimochi profile image
Kate Efimova

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

Collapse
 
smammar profile image
SMAmmar

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.

Collapse
 
kefimochi profile image
Kate Efimova

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;)

Collapse
 
willtharris profile image
Will Harris

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

Nice work!

Collapse
 
kefimochi profile image
Kate Efimova

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

Collapse
 
jorenrui profile image
Joeylene

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

Collapse
 
deva profile image
Vasudev1618

Great work Kate!👍 Keep writing 😊

Collapse
 
itscodingthing profile image
Bhanu Pratap Singh

love the way you explain the concept👍.

Collapse
 
afandilham profile image
afandilham

Nice concept 😸

Collapse
 
thomasbnt profile image
Thomas Bnt ☕

Nice post 👌

Collapse
 
mt3o profile image
mt3o

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

Collapse
 
wrldwzrd89 profile image
Eric Ahnell

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!

Collapse
 
crimsonmed profile image
Médéric Burlet

I see cats, I like!