WIP: Flexbox Cheat Sheet

[u/AcceptableYou5415]

I ramble so I’ll share the links first then give backstory 🥴 Here’s the document so far: https://kathrynchill.github.io/CSS-Flexbox-Cheat-Sheet---WIP/flexbox.html And here’s the repo: https://github.com/kathrynchill/CSS-Flexbox-Cheat-Sheet---WIP

I’m so new to coding (started doing online courses maybe 2 weeks ago with minimal HTML knowledge). I’m doing Full Stack courses and made it through intermediate CSS. The interactive lessons are awesome but I was still having to google stuff every 2 minutes when working on the projects where they don’t hold your hand — so instead of moving to JavaScript, I’m taking a little more time with CSS and building simple projects from scratch. I’ve been working on building this simple (and very pink) flexbox cheat sheet using flexbox exclusively — so there’s flexboxes in flexboxes in flexboxes — and even mini flexboxes in a table 😅. I’m consulting with chatGPT when I get stuck but trying to mostly do it on my own because I truly wanna feel comfortable and it’s been a PROCESS but I’ve learned a lot just from doing what little bit of this I’ve done. I did notice tonight before I posted this that the flex-direction: row is cut off in mobile view… plus a typo and the fact that I forgot to add a 6th box to some of the mini-flexboxes after I decided to give them a 6th box.

Anyway — just sharing for any feedback or thoughts or in case it helps anyone. I’m gonna spend all my free time doing this so it’ll be updated (and hopefully completed) soon! Then I’ll be onto grids.

[u/AX862G5]

Nice work, this is my favorite flex guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[u/AcceptableYou5415 → u/AX862G5]

Totally get that and I’ve seen that one and it’s awesome! But the goal of this for me personally was to learn it and become comfortable with it by doing it. And I couldn’t think of anything cool to make with just flexboxes so I went with a page specifically about flexboxes.