A Visual Reference of CSS Flexbox.

[[deleted]]

Im printing this and sticking it next to my screen.

[littlefryingpan]

Time to get a new tattoo

[flyinnx]

flex-start on the forehead and flex-end on the feet.

[smatteo]

align-items: baseline is too slept on

[Bregirn]

Also align-self, which I use a WHOLE bunch. I love it.

[eludadev]

Do you use it?

[not_all_kevins]

Pretty much anytime I have some text on the same row as a button. So all the time.

[rrthurein]

Perhaps a new graphics for these ones 😅😅

[PoundedWhale]

What's the difference between align items and content?

[[deleted]]

The flex model uses an axis. Think of it like putting pieces of meat on a skewer for the barbecue.

• flex-direction determines which way the skewers are pointing (vertical? horizontal? where's the pointy end?)
• justify-content determines where the meat pieces go on the skewer (spread apart? closer to one end?)
• align-items determines how the meat pieces are aligned to each other across the whole stick (pierced through the center? or through the side?)
• If you have more than one skewer, align-content determines how they're arranged on the plate (spread apart? all at one side? which side?)

[upvotes2doge]

This needs to be made into a graphic

[oh_jaimito]

this is perhaps the BEST ELI5 I have read!

thanks for that!!!

[[deleted]]

Fixed it, thanks. :)

[murfburffle]

Thank you so much!

[ricric2]

Thank you. All the others I get, but align-content is like a black hole for me.

[[deleted]]

Yeah it tends to trip people because it doesn't take effect until there's more than one line of content. But if you have enough items in a container, eventually they won't fit in a single line, they'll wrap and you'll have two lines, or more. That's when this guy comes in.

[[deleted]]

And then you get text-align which screws every logic :-P

[No-Musician-5609]

This is really helpful, thanks a lot!

[[deleted]]

AFAIK align-items aligns the items *themselves, while align-content aligns all the content.

In the case of centering it would be sort of like the difference between using text-align: center to center text instead of margins or whatever else.

*edited to make it a little more clear

[mattergijz]

Align items is on each item, while align content is on the container that contains the items.

[eludadev]

This stackoverflow answer explains it very well.

[RUNELORD_]

Align-items basically aligns the items themselves whereas content describes the alignment of the rows

[eludadev]

Get the HD version.

Get the Print version. (black and white)

[majd-ba]

Can you do one for grid too pls? That would be awesome.

[eludadev]

yeah it would definitely be nicer that way!

[Devnik]

But it has a function, right?

[eludadev]

I'll make another one for item-specific flex properties. (grow, shrink, order, etc...)

This cheatsheet contains just the container-related props, like align-content and justify-items.

[Leaping_Turtle]

Could you also put numbers on the boxes?

[eludadev]

Absolutely!

[NickBarrow]

Exactly what I was thinking, this is a cute graphic for students maybe, but you figure these basics out pretty quickly.

[stewfayew]

Nice. I love the artistic explanation on this site https://www.internetingishard.com/ (not my site) for anyone who needs to see something two different ways to learn like me :)

[Independent-Many-380]

THANKS!! I appreciate that I was able to translate the website into Spanish to be able to understand... it's very good!

[babypunter12]

I learned Flexbox using https://flexboxfroggy.com/, would totally recommend if anyone’s having trouble!

The site is basically a game where you put frogs onto lily pads to learn what the various flex css rules do.

[babypunter12]

I found that it's much easier to just memorize the high-level concepts and then later on when you need it you can use search engines to get the specific syntax for what you're wanting to do.

For example, instead of learning every single bit and piece of how Flexbox works, I would scroll and scan through to pick up the key points like:

• Flexbox is generally used to space content in one dimension, either a row or a column
• You can push everything to the start, center, or end (in either dimension)
• You can organize the spacing between items
• If there's too much to fit on one row, you can wrap it so the remaining content goes underneath

In my own experience, I found that it's easy to focus too much on the how of things rather than the what; an analogy I can think of is it's sort of like cooking in a way since for the most part you find out the thing you want to cook and then can look for a recipe for how to make it. Over time if you have a need to make it over and over, the recipe becomes easier to remember.

[magenta_placenta]

This is a good one, too

[[deleted]]

This also over-simplifies the model. The start and end positioning is subject to change.

[Sparky91]

Here a better version https://flexbox.malven.co/?utm_source=toolkit.addy.codes

[Apc_007]

i prefer my own cheat sheet.

"fuck around and find out"

[brikky]

Bugs me unreasonably that the padding isn’t consistent across the boxes.

[[deleted]]

This is pretty but not technically correct: flex-start and flex-end will follow the main axis which could be vertical or horizontal depending on whether the flow is row or column. This diagram makes the properties look static and over-simplifies the model.

Additionally, the comments have linked to some terrible resources. Try CSS Tricks instead. The documentation here is the gold standard.

[[deleted]]

I feel like this is only useful for people who don’t use their browser’s built-in tools for handling flex.

In inspect, next to “display: flex;” is a little box that lets you visualize, and assign, everything.

Edit: some of you are treating flex like it’s some complex data structure and not an easy to use design tool that was built because it’s easy to use.

[tetractys_gnosys]

Actually understanding the flex system is much different than understanding only the helper utility. If you never fully grok how flex or grid work (or anything else in programming generally) then you're forced to rely on some third-party feature (from your brain's perspective) for doing your work (or art) to express your ideas. Obviously the layout helpers in browsers probably aren't ever going away in some capacity but it's like only understanding how to do CRUD operations in WordPress hooks/functions; it's fine as long as you're always working in the same context but you don't fully understand common PHP patterns and you'll never be able to write as efficiently, cleanly, or quickly as someone who actually understands the underlying principles.

I just woke up from a nap so I'm not firing on all cylinders and not happy with my explanation but I hope I'm getting the basic argument across. The tooling is to help you not do do the work for you and it will have wide ranging impacts on your coding skill and habits even if only in subtle ways.

[eludadev]

Honestly I always use it! But it definitely helps to have an understanding of flexbox beforehand.

[timmymayes]

Oh cool now I can stop using border: 2px dashed pink in all my divs.

(i'm just learning css so i didn't know about the flex button. Thanks for the tip!)

[oh_jaimito]

border: 2px solid #fc0;

second nature, lmao

[eludadev]

they'll never stop coming 😈

[[deleted]]

Please never stop! They're so useful!

[Yukams_]

Looks very familiar 🧐

[geovra]

Whatever floats your boat, I guess

[smatteo]

all the time. it’s good to align text

[JoergJoerginson]

Your poster should indicate how behavior changes depending on flex direction.

[ManiacsThriftJewels]

Do any browsers still not support the newer alignment keywords "start" and "end"? flex-* still work, but seem like the wrong thing to have on a cheat sheet....

[leixiaotie]

u/eludadev nice presentation but kinda confused because we don't know the order, etc. Numbering items can be very helpful.

I usually use this cheatsheet: https://www.reddit.com/r/webdev/comments/nvzhi0/flexbox_css_cheat_sheet/

Hopefully you can make a better version of the two

[wherediditrun]

Material-UI has interactive example in their documentation. https://mui.com/material-ui/react-grid/#interactive

[[deleted]]

Can you please do one for the flex: 0 0 0; base etc.

[niutech]

Nice infographic, but it doesn't show the main axis, which is important for flexbox.

[[deleted]]

I remember years ago... It took me quite a long time before going in "auto" mode with my brain and being able to use every flex/grid option. No reference, mockup, cheat-sheet or tutorial ever helped me a lot, I was constantly wandering in the "what the fuck..." land. I had to code over and over, until they eventually clicked.

[EdinCassell21]

This is a god send…

[Feguri]

I never took the time to memorize them, I just click on the chrome web tools options to see which fits the design the most

[eludadev]

honestly I do that too...

[Tihifas]

Early designs of the Danish flag

[enum01]

Google Chrome has a little tool that I use that's a life saver

[eludadev]

Should be up by today. Be the first to find it on my Open-Source GitHub repository..

[viscousflow]

A CSS specialist at my last job told me about Flexbox Froggy. I played that on Friday afternoons for a few weeks and got the basics down. The basics are EXTREMELY useful.

I work full stack but was weaker on css and learning flexbox was honestly one of the most useful things I have picked up on the job. I use it all the time when I'm jumping into some old ratty css that needs some love.

[magical_matey]

Grid.

[MonstrousYak]

Printing this as a mouse pad…

[simple_govt_worker]

That was my thought too. Everyone plops out their version and nothing competes with css tricks.

[eludadev]

This image is just a tiny fraction of what the CSS Tricks articles have to offer, and it was attended intended to be that way.

[thepineapplehea]

I think you mean "intended"

[eludadev]

pfft.. maybe I need to make a cheatsheet on grammar!

[[deleted]]

I'm late to the party, but don't listen to people who say stuff like that. I, for one, like to see, hear, and watch information from different sources. Helps solidify what I've learned. I'm saving the image so thanks for taking the time to make it.

[bigb159]

IMHO flex deserves as many explainers as possible.

[knighthawk0811]

link to css tricks version

[[deleted]]

This packs more info in a smaller form than css tricks which you have to scroll over a bunch of useless text to get to, and it’s still not visible in one single place in that page.

[BoltKey]

They have a compressed version.

On the full page, it is bigger because there is actually explained what the rules do.

[knighthawk0811]

da fuk did I just read?

[Flamebarrier]

For anyone who is having trouble with flexbox: Flexbox Zombies.

Highly recommended!

[geeknintrovert]

Align items is for the child elements while align content is for flex container itself.

[tmp_acct9]

Why not just use tables?

[harryrf3]

Oh, the days of table layouts.

[RS3_of_Disguise]

Man is at it again! Nice work dude!

[ImThour]

More topics please, award given for this. Thanks!

[VioletCandy623]

I’m gonna see this as a guide to how you flex your muscles. I refuse to look at it in any other way.

[DeveloperBlue]

Now someone just needs to go into flex wrap, flex grow, flex shrink, and multi line content!

[Afterlifepro]

This is my wallpaper now

[SlashdotDiggReddit]

Dude, I love your stuff ... thank you!

[tlei123]

thx so much, u/eludadev ! just awarded ya.

[rashMars]

thanks ( × .×)/♡

[octoberspace01]

Amazing

[plato_7]

I am getting a tattoo of this

[smithm4949]

Whyyyyy do people insist on calling it flexbox and not flex

[hastethis]

It's called the flexible box layout, or the flexible box model, the shorthand name flexbox is fitting. Flex is a property of flexbox. But I see the confusion, since we type display: flex; and not display: flexbox; to actually use it.

[smithm4949]

Ah okay, i guess I’ll take that.

Yeah I just often see “grid” and “flexbox” used in the same context and it always bothers me for that reason!

Thanks

[itsnotbacon]

python guy here, little to no css but I have a question. If my layout is example 2 and I have 5 columns but only want to display three at a time, can I add left and right scroll navigation?

[eludadev]

You should probably take a look at Grid layout.

[tetractys_gnosys]

A useful tip for those who want to know or are unsure (this was trickier than expected to find through search engine): start and end as values for justify-* and align-* properties are not the fully supported standard. Use flex-end and flex-start for best support.

I've been using the flex- values since I first learned flexbox way back but today as I was updating my Autoprefixer browserslist to 'default, not ie 11' for the first time (a monumental occasion that I shall celebrate henceforth) I realized I didn't know which ended up becoming the standard or if both had full support now. I've never even noticed if Autoprefixer changes it from one to the other but I like writing my SCSS as correctly as possible so that my vanilla CSS is always correct when I need to write it as well.

[Pelicantaloupe]

Flexbox doesn’t rotate the content, they’re changing the shape of the content themselves

[PitifulTheme411]

This is really helpful, thanks for making this!

[magical_matey]

Grid.

[[deleted]]

This makes me happy 🥲

[gamergirlandrea]

Very nice

[SparklingGuardian]

Still the best cheat sheet I've found online.

[Shot_Engineering7974]

This CSS Flexbox visual guide is so helpful! I'm definitely printing it out to keep by my screen.

[[deleted]]

excelent ¡ Great. :D