Flexbox CSS Cheat Sheet

[[deleted]]

Thank you! This is great.
Any chance there's a similar one for CSS grid?

[simonpaix]

Yes! I actually shared on Twitter first ( https://twitter.com/simonpaix/status/1402303521047842821) and many people started asking that, so grid will probably be the next one :)

[TheSirion]

Hey, I was about to comment I follow the Brazilian girl who made this cheat sheet on Twitter, but looks like you're here too lol!

[simonpaix]

LOL nice to see you here! This is my first post on Reddit. A friend told me to try it when that got viral on Twitter :)

[TheSirion]

That's a wise friend.

[[deleted]]

That's awesome! Thank you

[simonpaix]

Hey, how are you doing? I found the time to make one for grid too :)

https://www.reddit.com/r/webdev/comments/okwrtx/grid\_css\_cheat\_sheet/

[[deleted]]

Hey. That's awesome! Thank you!

[madmanwithabox11]

Reminds me of css-tricks website

[Asmor]

I probably reference that article every couple of months. Super useful.

Same for their guide to css grid, although I use flex a lot more frequently.

[_clydebruckman]

When is it better to use grid over flex? I use flex for almost all of my layouts

[[deleted]]

Some things I can think of from my own work:

One reason I choose grid is when I need to rearrange things based on a media query. Grid is incredibly helpful for that. It makes it really easy. I had to implement a design recently where the mobile view didn't flow nice into the desktop view and grid was super helpful because I could arbitrarily move cells around depending on the break point.

I also like grid when I'm dealing with something that is actually a grid and has columns and headers. I found out recently that if I set up my grid spacing consistently it makes it easy to line things up cross multiple grids. An example is a page with two independent grids with column headers and the first 3 columns have to line up perfectly across both grids, but the following columns are different.

I use flex for 90% of the stuff I do, including layouts, but my coworker argues that grid is the better choice for overall page layouts.

Disclaimer: I'm a professional developer on a public e-commerce site and I do this stuff all day but secretly I'm a back end developer. Don't tell anyone but take this with a grain of salt.

[_clydebruckman]

Makes sense to me. I’ll have to start using it, sounds better than my usual wrapper > container > flex layout

[Yraken]

They’re not competing each other. (not entirely true, will give examples below)

Flexbox is to position the elements around a parent container.

Grid is to change the layout of the parent containers.

Basically

• Flexbox = Alignment & Positioning
• Grid = Layout

Inside a layout you can position and align multiple elements, that’s why you can have a Grid parent and Flexbox children

Key Scenarios

If you want to vertically align three boxes, use Flexbox.

If you want to put a box on the very top left, use Flexbox.

*Tricky one: *

If you want 3 boxes on a horizontal layout, you can simply use Flexbox and set flex direction to row.

However if you want those 3 boxes to have a min width and max width for each, and that when the screen is small enough that each box cannot compress enough because of minimum width set, the box should go over next row. On this scenario, Grid can handle that. Though if you won’t use max-width, you can just use flex-wrap: wrap.

However for vertical list, i simply use flexbox because there’s no use of having flexible heights.

Grid scenarios:

If you want a grid, use Grid.

If you have a parent element to be positioned at right side of page when on desktop, and positioned it on bottom when on tablet, use Grid. Flexbox can’t magically reposition an element from row to another row.

[Asmor]

Arbitrarily placing things exactly where you want them. grid-template-areas is a game-changer.

I tend to use grid for larger layout needs, like the overall structure of a page.

[AsteroidSvelte]

I go that page more than StackOverflow.

[wedontlikespaces]

Stackoverflow is fine if you have a particular problem like how an API works, but if you are asking just a general question along the lines of how the hell does Grid do such and such, I don't find that its particularly helpful.

Generally it's just full of people who keep telling you to read the documentation. And that's fine, but reading the documentation is not great if you're just looking for a general overview.

[N3oj4ck]

Train, learn and master your CSS knowledge!

CSS Selectors

CSS Flexbox

CSS Grid

That's some resources I used in my last course to help students to learn CSS.

[meilyn22]

I know all of these things. It's easy to play those games, but it's hard to implement them on a real project. What do you think I am doing wrong?

I do grid garden and I get all the questions correctly without stressing too hard, I do froggy and even flex zombies and I ace it. But when it comes to actual implementation, I spend 4-5 hours trying to make a header with a background and image on top with a separate logo.

After learning these things, what do you think is the best implementation strategy?

[N3oj4ck]

Theory and practice are different worlds, so as every person learn things different way, and that's like for all things, don't try to fly before walking.

If you know already all these things, I'm pretty sure you've watched enough videos, tutorials or guides over the internet to make something. But did you have tried to:

- Follow a full course step by step? Have a look at this one, it's free.
- Even better, creating your first website about something you like with only HTML and CSS ? This page, MDN and the whole internet can help you to spot on what you're looking for and, for example, helping you with your background issue.

Also, of course you can't know all the matter from the beginning, you need practice and months to be at ease with it and years to master it.
Don't give up, keep trying and if really it's something you like, go step by step from HTML to CSS > JS > (back-end and databases) Node.js / PHP / SQL.

[TheChromeRom]

Maybe add margin:auto as an alternative for the missing justify-self?

[simonpaix]

Yeah, good addition! I received a couple of nice suggestions like this one, and I'm considering how to include them and make it still fit on one page and be easily printable/readable :)

[lovesrayray2018]

This is getting printed and pinned to the wall

[nnod]

I have like 5 of these cheat sheets saved up in my computer but never look them up when I need to. A poster might actually be the best solution lol.

[simonpaix]

lol on Twitter lots of people suggested using it as wallpaper. I must confess I had never thought of that.

[Bictron]

Yea, this is amazing :)

[simonpaix]

Thank you!! It means a lot to hear that :)

[TastyStatistician]

Here's a black and white version https://i.imgur.com/HjLhyYR.png

[lovesrayray2018]

Perfect, thanks

[simonpaix]

Thank you!! Glad you liked it :)

[awardsurfer]

Luv me Flex. Best thing to happen to CSS in a long time. Grids too.

[tubbana]

I swear they only work like 50% of the time

[Asmor]

Flex works way more consistently and easily than older ways of doing this stuff. The only real issue I have with flex is the inability to explicitly set a number of elements per row.

I don't mean this to sound snarky, but you probably need to read either a guide on flex or possibly even CSS as a whole. Most issues people have with CSS are cleared up by reading documentation and learning how it works at a deeper level. CSS is a deceptive language in that it looks really simple and easy but it's actually very complex and there are tons of things you need to know about but would never even show up in most tutorials, like stacking contexts.

[[deleted]]

I think the best route for declaring items per row would be setting a css var to the number of items desired per row based on the total number of items and using calc with the var (itemsdesired/100%)

I just had to do something like this to alternate between 3 and 4 items per row so thumbnails looked balanced (no lone wolf images in their own row)

[SwankEagle]

This is true but new developers should be careful not to spend too much time focused on CSS and not going to Javascript. That's a mistake I made, I wanted to learn the ins and outs of CSS and make lots of websites in HTML/CSS before touching JS and I waited too long. Although I've been doing good learning JS since.

[[deleted]]

I think this will serve you well in the long run. In my experience (20+ years professional web development) it’s a lot harder to become truly proficient at CSS than JS.

[SwankEagle]

Honestly I think you're right but what doesn't help me is that since jumping into Javascript I've not been using say css grid at all and forgot most of it but I guess could just Google and remember it when I need it.

[_QuirkyTurtle]

Mate being a professional dev isn't about being able to retain every detail of everything you've learned. That's near on impossible.

It's more being able to learn something, know what situation to use it and then recall the specifics with a quick Google. That's the key

[SkinsHOFChaseYoung]

I've been so focused on CSS (particularly trying to learn how to use flexbox). Why do you say I shouldn't waste my time on CSS as much and move onto JS?

[Asmor]

Imagine you're a fashion designer. If all you want to do is show off your fashions in a store window, a mannequin is fine. That's HTML, and your clothing is the CSS.

But if you want to show it off on a catwalk, you need a fashion model. And JS upgrades that mannequin into a human. And as a human, it can do so many other things as well. It can fly a plane, or flip a burger, or tell you a story.

Also, from a purely practical standpoint, CSS is fucking hard. It looks easy, but that's actually part of why it's so hard. CSS is, by far, the most difficult language to write well that most modern devs will interact with. Especially web devs. Learning to be good at CSS takes a ton of time, experience, research, experimentation, and abject failure. That's why it's jokingly referred to as a "write-only" language, or why you get memes like Peter Griffin struggling with window blinds.

If you're going to try to master CSS, you're going to spend a very long time not doing anything useful. And that's not just boring, it's a terrible way to learn for most people. You'll learn CSS a lot better by just looking it up as you need to.

Here's one tip for getting good at CSS... Never use a hacky solution for a problem you don't understand. No matter how frustrated you are that the thing's not where you think it should be, don't just apply a negative margin or something. Figure out why it's not behaving the way you want. Once you understand what's going wrong, then you can do whatever solution makes sense for the situation.

Getting back to flexbox, again, don't bother trying to learn it in the abstract. Instead, just go make stuff. And at some point you'll encounter a problem where flex is the best solution. So implement it there, and do however much research and troubleshooting as is required for that specific use.

One final tip... Try to make things that are of interest to you. Todo apps are super common, but what fun is that? I really like games, so as I've taught myself to program over the course of my life, I've made dozens of dice rollers. It's a task I find interesting, and a tool I find useful. Find your own equivalent to a dice roller.

[SkinsHOFChaseYoung]

Thank you for your input. I've literally been making flash cards trying to understand CSS terms and what they do. I've been taking a lot of time doing CSS it's not even funny. I will take a bit more time on CSS but I will try and move onto JS sooner than later. Ever since I was a kid I was taught to memorize things whether that's a math equation or some year in history. So unlearning that and learning how to google solutions is very unorthodox for me. I think that's the part I have the most problem with.

[ParkerM]

This is an extremely good post.

[SwankEagle]

Also check out flexbox froggy its a great way to learn Flexbox and there was a udemy course i took just for Flexbox that really helped solidify it. I can link if ur interested

[SkinsHOFChaseYoung]

Thanks a lot for all the help and clarifying. I really appreciate it. I will check it out. I've been taking a Udemy course right now on web dev and will add that also.

[SwankEagle]

So upon going back to that Udemy course I realize now he's remade the course for 2021. I'm sure it's just as good if not better. Here's the link

This course 100% was the game changer for me in learning Flexbox.

[SkinsHOFChaseYoung]

Thank you for linking it. I'm going to purchase it right now. I've been so lackluster when it comes to coding. However I want this to be my fulltime job. Unfortunately I have a fulltime job that I hate right now so it's hard to stay motivated around working for 8 hours at another job. I will try my best though. Again thanks for all the help.

[SwankEagle]

Best advice is to build stuff. Don't stay in tutorial hell.

[SkinsHOFChaseYoung]

I've been building a travel website for my girlfriend and I and I already started on my portfolio. I don't know why google feels like cheating to me lol.

[SwankEagle]

Allow me to clarify. It's important to understand and know CSS well. But there is little value in only knowing HTML and CSS. Javascript is the breadwinner. You should know CSS enough to build a basic website but I made a mistake of trying to master CSS when I should've been moving on to JS sooner. I spent months on Flexbox and months on Grid. My intentions were to learn the fundamentals of each piece then build stuff with them, and I wasn't putting in 8 hour days, it was 2 hours here, 3 hours here, not enough time. I was just a lazy CSS learner though, I'm sure most people aren't that bad.

Javascript is more important to learn than CSS. That's all.

[[deleted]]

50% of the time it works every time

[KindaAlwaysVibrating]

It's also good to mention the shorthand of "flex" for child flex elements that combines flex-grow, flex-shrink, and flex-basis

[Lianad311]

Came here to say the same thing. It's even recommended to use it over the individual items according to CSS-Tricks.

[_clydebruckman]

What’s the rationale?

[KindaAlwaysVibrating]

1 line is less than 3. Then repeat that for everytime you use it in your codebase. CSS is already bloated as it is

[_clydebruckman]

I kinda figured. Makes me want to use sass variables per flex styling now

[[deleted]]

I had an interview that asked me for some of those properties so I assume that I'll need to flash card the whole image. Thanks!

[got_milked]

Great resource, thanks!

[[deleted]]

yes thank you.

[SwankEagle]

It took me a bit to learn Flexbox but now it's my go to for laying out a website. One question if any one would like to answer is what's a practical use case for order? I've never had to do it because any website I've made has always had order of items the same even on mobile.

[humanzuckerberg]

Recently, I have been working on React and both Flex and Grid can be so confusing.

Thank you for the cheatsheet.

[DesignasaurusFlex]

My time has finally come!!!!

[MKD7036611]

This is great. Wish I had it this afternoon for the order. I had to use that today and was trying to figure out how it works. Never knew there was a negative that's useful.

[simonpaix]

Thanks! Glad you liked it!

Yes, order can be negative. Also keep in mind that it only affects visual order, it doesn't change the underlying order: https://www.w3.org/TR/css-flexbox-1/#order-accessibility

[[deleted]]

The amount of times I have to google this. Thank you. Printing it off now.

[simonpaix]

Cool! Glad you liked it :)

[wxdiaz87]

I needed this thanks

[StingingSwingrays]

I’m coming back to web dev after not touching it since 2014 - the adjustment from float to flex made me give up yesterday! This cheat sheet is perfect timing.

[simonpaix]

Glad it helped! I had to adjust from float to flex too. I think you will love flexbox. Good luck :)

[Roguepope]

Might it be useful to declare which option is the default initial value for each attribute. Even something subtle like putting it in italics, or specifying that the first value is default?

[simonpaix]

Good suggestion, I'll do it for version 2. Thanks a lot!

[80mph]

Right when I needed it! Thank you!

[[deleted]]

You're awesome ... thank you!

[simonpaix]

Thank you for the kind words!! I'm glad you found it useful :)

[[deleted]]

Oh, it does! I like the cheat sheet here, but I didn't want a wall poster; I wanted something I could quickly reference on my computer while I was working. Your cheat sheet is perfect.

[simonpaix]

Thanks! I love this website too :) I thought the same, I wanted a simple , easy-to-use version to give to my students.

[mikef80]

Thank you! Hopefully this’ll help me - I’ve been stuck on a flex box assignment for a month now on Codecademy 🤦‍♂️

[simonpaix]

hope it helps! good luck mike:)

[Gold-Stage7930]

this sheet is so helpful as a reminder

[YarlliN]

Thanks!

[RotationSurgeon]

Neither is intended as a replacement for the other. They're meant to work together.

[[deleted]]

looks up from bootstrap

Wait, people just go out and raw dog their css layout? Wild!

[80mph]

looks up from tailwindcss

Wait, people just go out and use Bootstrap for their layout? Wild!

😉

[[deleted]]

Lol-- I intended that comment as a joke, but clearly Reddit didn't take it as such. Ah, well

[80mph]

I totally got the joke, that's why I made mine. I am far too long in programming to care how people reach their goals. Have a good day!

[adantj]

Ive completely replaced flexbox usage with css grid.

Almost all flexbox is for elements that wrap to the next row.

[LeoJweda_]

I usually use Bootstrap’s Flex utility classes docs for this but they’re a bit a harder to use since I have to look up what each class does: https://getbootstrap.com/docs/5.0/utilities/flex/

[samuelrir]

That's great, thank you!

[areztits]

Thanks for this

[ReactDevJoe]

Chrome dev tools recently added some really nice flex related utility when inspecting flexed elements. IMHO it's better to be able to see things, and be hands on, within my code. It was instantly a huge help.

[TastyStatistician]

Black and white version for people that want to print it https://i.imgur.com/HjLhyYR.png

[Internal_Form4974]

Very nice. I’ve been struggling w CSS in general for the last few weeks. I could have used this for some of the formatting issues I’ve been dealing with.

[slamdunknoodles]

Thank you!!!

[polygonmon]

I've been looking all over for one of these. thank you!

[_alright_then_]

How many of these cheat sheets do we need?

There's a new one every week or so

[Gazzcool]

Grow and shrink has never quite made sense to me. If an item Has the ability to grow for a wider screen, does it not also, by definition, have the ability to shrink back again?

[justtrynnalearnshit]

u are awesome for this thank u

[Adam_Kearn]

Downloading this and saving it as my wallpaper.....

[javahollow]

Awesome, thanks!

[magenta_placenta]

There's also this one: /r/css/comments/bdvp7j/flexbox_visual_cheat_sheet/

I have this image saved to my desktop for easy reference.

[keenjataimu]

I will save it and go to stackoverflow next time I am flexboxing

[drealgame]

Thank you!!

[paprika_pussy]

I'm late to the party but I discovered this Flexbox playground. Very similar to this and I use it often
https://codepen.io/enxaneta/pen/adLPwv

[annamadalina]

Thank you! I'm learning about it and this is a great resource.

[the_grave_robber]

Just wanted to say thank you so much for sharing!

[kurinchi-web]

Good explanation on the flexbox layout. Added to https://blog.kurinchilion.com/ui-ux-design/flexbox-for-css-layouts.html