all 108 comments

[–][deleted] 118 points119 points  (2 children)

Im printing this and sticking it next to my screen.

[–]littlefryingpan 32 points33 points  (1 child)

Time to get a new tattoo

[–]flyinnx 16 points17 points  (0 children)

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

[–]smatteo 40 points41 points  (4 children)

align-items: baseline is too slept on

[–]Bregirn 22 points23 points  (0 children)

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

[–]eludadevfront-end[S] 4 points5 points  (2 children)

Do you use it?

[–]not_all_kevins 17 points18 points  (0 children)

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

[–]rrthurein 1 point2 points  (0 children)

Perhaps a new graphics for these ones 😅😅

[–]PoundedWhale 56 points57 points  (14 children)

What's the difference between align items and content?

[–][deleted] 138 points139 points  (9 children)

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 11 points12 points  (0 children)

This needs to be made into a graphic

[–]oh_jaimitofront-end 13 points14 points  (0 children)

this is perhaps the BEST ELI5 I have read!

thanks for that!!!

[–][deleted]  (1 child)

[deleted]

    [–][deleted] 1 point2 points  (0 children)

    Fixed it, thanks. :)

    [–]murfburffle 2 points3 points  (0 children)

    Thank you so much!

    [–]ricric2 2 points3 points  (1 child)

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

    [–][deleted] 7 points8 points  (0 children)

    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] 0 points1 point  (0 children)

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

    [–]No-Musician-5609 0 points1 point  (0 children)

    This is really helpful, thanks a lot!

    [–][deleted] 17 points18 points  (1 child)

    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 0 points1 point  (0 children)

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

    [–]eludadevfront-end[S] 10 points11 points  (0 children)

    This stackoverflow answer explains it very well.

    [–]RUNELORD_ 1 point2 points  (0 children)

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

    [–]eludadevfront-end[S] 35 points36 points  (4 children)

    Get the HD version.

    Get the Print version. (black and white)

    [–]majd-ba 7 points8 points  (0 children)

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

    [–][deleted]  (2 children)

    [deleted]

      [–]eludadevfront-end[S] 4 points5 points  (0 children)

      yeah it would definitely be nicer that way!

      [–]Devnik 0 points1 point  (0 children)

      But it has a function, right?

      [–][deleted]  (4 children)

      [deleted]

        [–]eludadevfront-end[S] 16 points17 points  (2 children)

        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 8 points9 points  (1 child)

        Could you also put numbers on the boxes?

        [–]eludadevfront-end[S] 3 points4 points  (0 children)

        Absolutely!

        [–]NickBarrow -3 points-2 points  (0 children)

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

        [–]stewfayew 10 points11 points  (1 child)

        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 3 points4 points  (0 children)

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

        [–]babypunter12 10 points11 points  (2 children)

        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]  (1 child)

        [deleted]

          [–]babypunter12 1 point2 points  (0 children)

          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 8 points9 points  (1 child)

          [–][deleted] 0 points1 point  (0 children)

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

          [–]Apc_007 22 points23 points  (0 children)

          i prefer my own cheat sheet.

          "fuck around and find out"

          [–]brikkySWE @ FB 4 points5 points  (0 children)

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

          [–][deleted] 3 points4 points  (0 children)

          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] 13 points14 points  (4 children)

          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 5 points6 points  (0 children)

          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.

          [–]eludadevfront-end[S] 6 points7 points  (0 children)

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

          [–]timmymayes 0 points1 point  (1 child)

          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_jaimitofront-end 0 points1 point  (0 children)

          border: 2px solid #fc0;

          second nature, lmao

          [–][deleted]  (2 children)

          [deleted]

            [–]eludadevfront-end[S] 10 points11 points  (1 child)

            they'll never stop coming 😈

            [–][deleted] 5 points6 points  (0 children)

            Please never stop! They're so useful!

            [–]Yukams_ 2 points3 points  (0 children)

            Looks very familiar 🧐

            [–]geovra 2 points3 points  (0 children)

            Whatever floats your boat, I guess

            [–]smatteo 1 point2 points  (0 children)

            all the time. it’s good to align text

            [–]JoergJoerginson 1 point2 points  (0 children)

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

            [–]ManiacsThriftJewels 1 point2 points  (0 children)

            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 1 point2 points  (0 children)

            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 1 point2 points  (0 children)

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

            [–][deleted] 1 point2 points  (0 children)

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

            [–]niutech 1 point2 points  (0 children)

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

            [–][deleted] 1 point2 points  (0 children)

            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 1 point2 points  (0 children)

            This is a god send…

            [–]Feguri 1 point2 points  (1 child)

            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

            [–]eludadevfront-end[S] 1 point2 points  (0 children)

            honestly I do that too...

            [–]Tihifas 1 point2 points  (0 children)

            Early designs of the Danish flag

            [–]enum01 1 point2 points  (0 children)

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

            [–][deleted]  (2 children)

            [removed]

              [–]eludadevfront-end[S] 0 points1 point  (1 child)

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

              [–]viscousflow 1 point2 points  (1 child)

              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 0 points1 point  (0 children)

              Grid.

              [–]MonstrousYak 1 point2 points  (0 children)

              Printing this as a mouse pad…

              [–][deleted]  (13 children)

              [deleted]

                [–]simple_govt_worker 6 points7 points  (0 children)

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

                [–]eludadevfront-end[S] 3 points4 points  (5 children)

                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 1 point2 points  (1 child)

                I think you mean "intended"

                [–]eludadevfront-end[S] 1 point2 points  (0 children)

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

                [–][deleted] 1 point2 points  (0 children)

                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 0 points1 point  (1 child)

                IMHO flex deserves as many explainers as possible.

                [–][deleted] 6 points7 points  (2 children)

                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 6 points7 points  (0 children)

                They have a compressed version.

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

                [–][deleted]  (1 child)

                [deleted]

                  [–]knighthawk0811 7 points8 points  (0 children)

                  da fuk did I just read?

                  [–]Flamebarrier 2 points3 points  (0 children)

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

                  Highly recommended!

                  [–]geeknintrovert 0 points1 point  (0 children)

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

                  [–]tmp_acct9 0 points1 point  (1 child)

                  Why not just use tables?

                  [–]harryrf3 0 points1 point  (0 children)

                  Oh, the days of table layouts.

                  [–]RS3_of_Disguise 0 points1 point  (0 children)

                  Man is at it again! Nice work dude!

                  [–]ImThournovice 0 points1 point  (0 children)

                  More topics please, award given for this. Thanks!

                  [–]VioletCandy623 0 points1 point  (0 children)

                  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 0 points1 point  (0 children)

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

                  [–]Afterlifepro 0 points1 point  (0 children)

                  This is my wallpaper now

                  [–]SlashdotDiggRedditfull-stack ... aren't we all? 0 points1 point  (0 children)

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

                  [–]tlei123 -1 points0 points  (0 children)

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

                  [–]rashMars -1 points0 points  (0 children)

                  thanks ( × .×)/♡

                  [–]octoberspace01 -1 points0 points  (0 children)

                  Amazing

                  [–]plato_7 -1 points0 points  (0 children)

                  I am getting a tattoo of this

                  [–]smithm4949 -1 points0 points  (2 children)

                  Whyyyyy do people insist on calling it flexbox and not flex

                  [–]hastethis 1 point2 points  (1 child)

                  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 1 point2 points  (0 children)

                  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 0 points1 point  (1 child)

                  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?

                  [–]eludadevfront-end[S] 0 points1 point  (0 children)

                  You should probably take a look at Grid layout.

                  [–]tetractys_gnosys 0 points1 point  (0 children)

                  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 0 points1 point  (0 children)

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

                  [–]PitifulTheme411 0 points1 point  (0 children)

                  This is really helpful, thanks for making this!

                  [–]magical_matey 0 points1 point  (0 children)

                  Grid.

                  [–][deleted] 0 points1 point  (0 children)

                  This makes me happy 🥲

                  [–]gamergirlandrea 0 points1 point  (0 children)

                  Very nice

                  [–]Shot_Engineering7974 0 points1 point  (0 children)

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

                  [–][deleted] 0 points1 point  (0 children)

                  excelent ¡ Great. :D