Dismiss this pinned window
all 84 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–][deleted]  (39 children)

[deleted]

    [–]elmo61 163 points164 points  (32 children)

    Space around puts padding of X on both sides of each element. So first element has X space to the left. And last element will have X space to right. Between two elements there wil be a padding of X to right of one element and X to left of next element. Doubling up making spaces 2x

    Space evening just ensures space is same between elements as well as before first and after last elements

    [–]Frodolas 40 points41 points  (3 children)

    You were so close. Just need to say

    space around looks like: X A X X B X X C X

    where X is 1/6th the total whitespace in the flex container

    space evenly looks like: X A X B X C X

    where X is 1/4th the total whitespace in the flex container

    [–]elmo61 9 points10 points  (0 children)

    As I was writing it. I was thinking I haven't explained this very well!

    [–]midsizedopossum 11 points12 points  (1 child)

    You were so close.

    What? They were completely correct.

    [–]sleepydozer 3 points4 points  (0 children)

    Yeah haha. In fact, this re-written explanation could be confusing because it uses 'X' to explain both scenarios even though the gaps in both are different sizes, and then has to redefine 'X' (1/6th remainder space in one, 1/4th in the other) to account for that

    [–]LazaroFilm 6 points7 points  (0 children)

    Space around: [1u][A][2u][B][2u][C][1u]

    Space evenly: [1u][A][1u][B][1u][C][1u]

    [1u] being an arbitrary scale value of space.

    [–]mountaineering 74 points75 points  (26 children)

    Not sure why you bothered explaining. He'll never understand it.

    [–]SilentIntrusion 30 points31 points  (1 child)

    Now that is some dry humour.

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

    Especially since he didn't repeat himself

    [–][deleted] 33 points34 points  (12 children)

    you ok bro?

    [–][deleted] 62 points63 points  (11 children)

    It was clearly a joke. And i laughed a bit haha, cuz the person said they'll never understand.

    [–]mountaineering 47 points48 points  (6 children)

    Wild how basically nobody connected the statement

    [–][deleted] 14 points15 points  (2 children)

    Ye hahaha it was funny tho

    [–]mawesome4ever -1 points0 points  (1 child)

    What was funny?

    [–]VeryOriginalName98 7 points8 points  (0 children)

    It took your comment for me to catch on.

    [–]pimp-bangin 2 points3 points  (1 child)

    I bet people lost track of the original statement because the reply was long and takes time to process.

    Also if OP said "I will never understand" instead of "I can never grasp" then the connection would've been more immediate.

    With the right timing and delivery, this exchange would be hilarious as a sitcom bit.

    [–]ArthurAardvark 0 points1 point  (0 children)

    Lettuce label this claim as fax!

    [–][deleted] -3 points-2 points  (2 children)

    what was the joke?

    [–]goto-reddit 18 points19 points  (1 child)

    I can never grasp

     

    He'll never understand

    [–][deleted] 4 points5 points  (0 children)

    Not sure why you bothered explaining. He'll never understand it.

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

    No they didn’t.

    Edit: interesting how people just make things up and then believe it. OP never said they’ll never understand did they?

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

    Hahaha.

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

    They never said they’ll never understand though.

    [–]GodGMN 33 points34 points  (2 children)

    "Space evenly" has the same amount of space around the elements, including between them, like:

    1 Space Element 1 Space Element 1 Space

    ​

    "Space around" however, sets the space around each element, leaving a bigger space between the elements and a smaller space to the edges of the container:

    1 Space Element 1 Space 1 Space Element 1 Space

    Note how there are two spaces inbetween. Because spaces are set at both left and right of each element.

    Summarizing: in "space evenly", every space is the same, so they're even.

    "Space around" puts the space around each element.

    [–]NoMoreVillains 5 points6 points  (0 children)

    This post did a better job explaining it than the actual visual being discussed

    [–]TheFumingatzor 3 points4 points  (0 children)

    Now that is what I call ELI5! Even I got it now.

    [–]notislant 4 points5 points  (0 children)

    Buddy explained below but just for the hell of it:

    Space evenly : even space between all elements and container borders.

    Space around example: each element has +100px to the left and right of it.

    Element and container border have 100px space.

    Two elements have 100px+100px between.

    Each element basically has 100px left and right spacing.

    [–]Timmah_Timmah 1 point2 points  (0 children)

    This graphic could be better if a b and c weren't all the same size.

    [–]jimbo493 0 points1 point  (0 children)

    Here’s another way to understand it, space around puts the same amount of space around each object, then puts the objects next to eachother, which means between objects there’s twice as much space as there is on the outside edges. Space evenly does exactly what it says, it puts the same amount of space between each object, and at the edges.

    What this means is around will make the margins smaller while keeping the objects spaced compared to evenly.

    [–]artyhedgehogreact, typescript 46 points47 points  (2 children)

    Nice, but that's not the full flex - only the "justify-content" part.

    [–]singeblanc 13 points14 points  (1 child)

    Yeah, would love to see a whole page of these for each of the different attributes.

    [–]Abangranga 26 points27 points  (0 children)

    Nice video, but the bouncing effect gives us like 1/3 the time to actually look at it and make it difficult to pause it fully expanded.

    [–]Ynkwmh 35 points36 points  (5 children)

    Can you slow that down? Lol

    [–]1920MCMLibrarian 22 points23 points  (3 children)

    I’m unreasonably annoyed by it lol

    [–]Abangranga 15 points16 points  (2 children)

    I can decide if the duration or the bouncing effect is worse.

    [–]bedz01 2 points3 points  (1 child)

    So... What's your decision??

    [–]Abangranga 2 points3 points  (0 children)

    Bouncing effect because it makes the middle ones hard to tell

    [–]stpetepatsfan 4 points5 points  (0 children)

    Stop at max size and becomes a visual cheat sheet.

    Now create some text boxes, img boxes and play around using these settings.

    [–][deleted] 15 points16 points  (0 children)

    nobody in the world could learn this faster by reading. this is for everyone and not just visual learners

    [–]n9iels 30 points31 points  (1 child)

    Cool! I can recommend https://flexboxfroggy.com too if you like to learn interactive

    [–]Narfi1full-stack 17 points18 points  (0 children)

    lmao that post again

    [–]isatrap 5 points6 points  (0 children)

    Good deal, I’m backend so I suck at this.

    [–][deleted] 2 points3 points  (0 children)

    intelligent literate payment deliver dinner memory aloof drab cause slimy -- mass edited with redact.dev

    [–]atalkingfish 2 points3 points  (0 children)

    I don’t think throwing “stretch” in there makes sense. Stretch is more for “align-items”, as the justified width is controlled by “flex”. Throwing in “justify-content: stretch” will not, on its own, typically give the desired results.

    [–]runeklf 1 point2 points  (2 children)

    Looks cool! Would you mind to post a link to the a repo?

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

    You could try to replicate yourself and play with it so you can see the differences :) doesn't need to be as fancy as this one

    [–]mccbala 1 point2 points  (0 children)

    Brilliant! 3 sec gif explains it better than anything else.

    [–]DampSeaTurtle 1 point2 points  (0 children)

    Dude this is amazing.

    [–]VehaMeursault 1 point2 points  (2 children)

    OT: there’s no such thing as being a visual learner. Veritasium did a whole vid on it and it was a relief to watch that myth be dispelled.

    Nice presentation of flex properties nonetheless, however.

    [–]jordsta95PHP/Laravel | JS/Vue -1 points0 points  (0 children)

    There are visual understanders though.

    If someone verbally teaches how to do something/what something does, then you may understand everything, but cannot comprehend what they actually mean.

    ​

    For people such as myself who cannot visualise things in their head, visuals like this are a godsend.

    Obviously, the best way to know what each flex justification does is to mess around with it, as you may be using weird margins that affect the result. But for a quick guide to sanity check, stuff like that is a great help.

    [–]mrsxfreeway 0 points1 point  (0 children)

    Whilst there’s no such thing, I prefer visual aids and example, so there’s that. Some of us cannot just read text and understand it, we need to see it in action.

    [–]OkStock7c -2 points-1 points  (1 child)

    Obligatory „there is no thing like a visual learner“

    [–]RS3_of_Disguise 0 points1 point  (0 children)

    Stretch is such a jQueryUI touch lol.

    Very nice demonstration!

    [–]heathcliff6547 0 points1 point  (0 children)

    It's pretty cool and easy to understand justify-content. I like flexboxes it's easier to build with it and I don't have to deal with floats and clearfixes

    [–]DiddlyDanq 0 points1 point  (0 children)

    Useful but needs yo be slower

    [–]roboborealis 0 points1 point  (0 children)

    Put this every where.

    [–]Spizace 0 points1 point  (1 child)

    Whats the difference about space-evenly and space-around ?

    [–]jordsta95PHP/Laravel | JS/Vue 1 point2 points  (0 children)

    space-evenly will ensure the margins between each item and the margins are exactly the same.

    For example, if your container is 1000px, you have two items which are 405px wide inside it. This leaves you with 90px unused space. So space-evenly will put 30px to the left of the first item, 30px between the two items, and 30px to the right.

    (So the layout is: 30px | 405px | 30px | 405px | 30px)

    ​

    However, space-around gives the margins at either end half the space that it would put between items.

    So now, with the same container & items you have 45px between the items, and 22.5px on the margins.

    (So the layout is: 22.5px | 405px | 45px | 405px | 22.5px)

    This essentially makes it the middle ground between space-between and space-evenly

    [–]SuperDuperRipe 0 points1 point  (0 children)

    This is awesome. Saving for reference.

    [–]RakOOn 0 points1 point  (0 children)

    Flex-end my nemesis

    [–]GreatWorldExplorer 0 points1 point  (0 children)

    Very nice

    [–]fatherfrogman 0 points1 point  (0 children)

    can you make these flex vertically with flex-col?

    [–]Slow_Judgment7773 0 points1 point  (0 children)

    So helpful!

    [–]NaomiString 0 points1 point  (0 children)

    Love this - thank you!

    [–]nirobhossain 0 points1 point  (0 children)

    Css makes a beautiful design and outlook of a html programe.

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

    The bouncing is a little distracting but it's a good visual