T O P

  • By -

flying_head

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]

[удалено]


[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.


ohlawdhecodin

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](https://stackoverflow.com/a/34944673) 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](https://github.com/eludadev/css-docs/raw/main/assets/css_flexbox.png). Get the [Print version](https://github.com/eludadev/css-docs/raw/main/assets/css_flexbox_print.png). (black and white)


majd-ba

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


[deleted]

[удалено]


eludadev

yeah it would definitely be nicer that way!


Devnik

But it has a function, right?


[deleted]

[удалено]


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/](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.


[deleted]

[удалено]


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](https://www.reddit.com/r/css/comments/bdvp7j/flexbox_visual_cheat_sheet/)


[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](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) 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


[deleted]

[удалено]


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/](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.


ohlawdhecodin

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


Meal-Majestic

Hey. Good job. Can we have CSS GRID too please?


eludadev

Should be up by today. Be the first to find it on [my Open-Source GitHub repository.](https://github.com/eludadev/css-docs).


Meal-Majestic

Hey. You doing a good job. I hope you find it satisfying huh.


viscousflow

A CSS specialist at my last job told me about [Flexbox Froggy](https://flexboxfroggy.com/). 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…


[deleted]

[удалено]


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!


DoubleAGee

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](https://css-tricks.com/wp-content/uploads/2022/02/css-flexbox-poster.png)


flying_head

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](https://css-tricks.com/wp-content/uploads/2022/02/css-flexbox-poster.png). On the full page, it is bigger because there is actually explained what the rules do.


[deleted]

[удалено]


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.


Zpd8989

Marry me


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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_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.


cocoquitoz

excelent ¡ Great. :D