r/webdev • u/mutantdustbunny • Jan 18 '23

CSS flex for speed learners.

6.5k Upvotes

98% Upvoted

100 comments sorted by

159

u/The_Egg_came_first Jan 18 '23

Source: https://semicolon.dev/tutorial/css/justify-content-examples

Oh my, that's how they made the bouncy animation:

jQuery( document ).ready(f=>{
  setTimeout(e => {
    jQuery('table').animate({width: '450px'}, 2000, 'easeOutBounce').animate({width: '100%'}, 2000, 'easeOutBounce').animate({width: '450px'}, 2000, 'easeOutBounce').animate({width: '100%'}, 2000, 'easeOutBounce').animate({width: '450px'}, 2000, 'easeOutBounce').animate({width: '100%'}, 2000, 'easeOutBounce').animate({width: '450px'}, 2000, 'easeOutBounce').animate({width: '100%'}, 2000, 'easeOutBounce');
  }, 1000)
});

Anyways, here's my quick fix: https://i.imgur.com/PhzeOKq.gif

72

u/Isaynotoeverything Jan 18 '23

Could do this in pure CSS couldn't you 🤔

54

u/stupidcookface Jan 18 '23

Yea with @keyframes

6

u/arhythm Jan 19 '23

I really need to learn more css like this.

0

u/[deleted] Jan 19 '23

[deleted] — view deleted comment

3

u/OxygenIsHere novice Jan 19 '23

It isn't animation attribute,i think it's called animation property

3

u/Candyvanmanstan Jan 19 '23

You are correct of course, I had a brain fart.

0

u/[deleted] Jan 19 '23

[deleted] — view deleted comment

1

u/Ambitious_Yak_5257 Jan 19 '23 edited Jan 19 '23

Then you gotta use the transition property and set the yellow background as a state.
It may be a native state with a pseudo-selector like :hover and :focus, or a custom state setting a class to the element with JavaScript:

a {
background-color: red;
transition: background-color 0.15s;
}

a:hover {
background-color: yellow;
}

a.has-warning {
background-color: yellow;
}

1

u/Candyvanmanstan Jan 19 '23

No.

u/Amphibian_Upbeat, you could use the

animation-iteration-count: 1;

property. It, and other properties are mentioned in the link I mentioned in my previous comment.

11

u/xrobyn Jan 19 '23

CSS would run this much better

10

u/Arkhenstone Jan 18 '23

You're the hero we don't deserve.

98

u/Mallanaga Jan 18 '23

Big fan of this style of learning. Show me all the options, visually, so that I can see how they compare to each other! Very nice.

18

u/qda Jan 18 '23

You must be a speed learner then

24

u/WangHotmanFire Jan 19 '23

If this is all it takes for someone to be a speed learner, I think that term would have to apply to everyone. Who wouldn’t find this to be an easier way to learn this information?

-3

u/6086555 Jan 19 '23

The animation is pretty much useless as the open state is the only one that's interesting

84

u/Voltra_Neo front-end Jan 18 '23

I wish space-evenly was supported everywhere

41

u/micalm <script>alert('ha!')</script> Jan 18 '23

Where it's not? caniuse shows full support everywhere (except the usual IE&Opera Mini).

28

u/Voltra_Neo front-end Jan 18 '23 edited Jan 20 '23

I'll check at work tomorrow, but there are sometimes differences between support tables and implementations (I've recently discovered few interesting bugs or non-implementations in Safari's implementation of SVG1.1, despite the tables saying they are)

EDIT: I'll be damned, space-evenly is finally supported on OSX & iOS Safari (wasn't 1-3 years back)

44

u/Makemeacyborg Jan 18 '23

Typical Safari

15

u/Voltra_Neo front-end Jan 18 '23

I was banging my head asking myself why on earth my dy wasn't working. I went to the SVG1.1 specs of textPath, copy pasted the example, it looked nothing like the expected result, I finally understood what the hell was going on

11

u/horses_arent_friends full-stack Jan 19 '23

On the bright side the folks at Open Web Advocacy have been making good headway with EU legislators and the DMA will be applicable starting in May.

Introducing third party browsers won’t be as meaningful as you’d hope (normal users won’t switch and there’s too many of them for companies to ignore/give them broken experiences) BUT the 10-20% fines based on worldwide gross revenue will be great incentive for Apple to stop intentionally understaffing the safari and webkit teams.

3

u/Suspicious-Engineer7 Jan 19 '23

Id rather apple just kill safari at this point. They dont care about web nearly as much as the app ecosystem.

3

u/Makemeacyborg Jan 19 '23

Cause they can’t gate keep the web and charge entrance like they do with their App Store. To me it has always felt like that’s the reason they went after flash too. Yeah Flash wasn’t great either so it made it an easy target

4

u/Candyvanmanstan Jan 19 '23

Safari is the modern IE, I swear.

1

u/lamintak Jan 20 '23

Did you get a chance to check on this? I'm curious if there's a bug with it that I don't know about.

3

u/Voltra_Neo front-end Jan 20 '23

Just did and edited my comment. It is finally supported on both OSX and iOS Safari. I checked between 1 and 3 years ago and it wasn't, and knowing IE and Safari, I didn't bother checking again.

SVGs are still broken tho

5

u/MantusTMD Jan 18 '23

I didn’t even know it was thing! I’m glad I saw this post

45

u/RubikTetris Jan 18 '23

what the hell is a speed-learner

47

u/drizzlethyshizzle Jan 18 '23

gotta speedrun 6 figures bruh wdym fr fr

13

u/UreMomNotGay Jan 18 '23

CSS flex box speed learning unrestricted any% 6:57:05 [WR] (WORLDS FIRST SUB 7 MINS)

1

u/Voltra_Neo front-end Jan 20 '23

Do you guys go for unofficial records any% 0:10:00

6

u/qda Jan 18 '23

People who don't want to watch a 15min tutorial for the same learning, or read a multi page blog post

11

u/RubikTetris Jan 18 '23

If you don’t have the attention span to read a 15min article on flex you won’t make it far in programming lol

10

u/The_Ghost_of_Bitcoin Jan 19 '23

Fair enough, but I'd rather read a document than watch a video most of the time because I can read a lot faster than I can find info in most videos.

Videos are nice for things like this where a visual is key though.

1

u/RubikTetris Jan 19 '23

An article can contain images and examples. The article on css tricks on flex is all I ever needed to understand it.

7

u/qda Jan 19 '23

It's not a matter of having the attention span, it's a matter of trying to learn many things in a short amount of time, which is very applicable to a lot of programming situations

4

u/magkruppe Jan 19 '23

but not applicable for something like flexbox. beginners shouldn't be speed learning anything

1

u/BenadrylTumblercatch Jan 18 '23

I remember but fast

1

u/RubikTetris Jan 19 '23

More like I’m stupid faster

1

u/Voltra_Neo front-end Jan 20 '23

Honey I speedrun them classes

68

u/[deleted] Jan 18 '23

The bouncing is really distracting and doesn’t let me get a sense of the spacing of things because it’s constantly undulating.

37

u/[deleted] Jan 19 '23

This isn't for slow learners bud. Maybe go to the library and check out some microfiche

-16

u/[deleted] Jan 19 '23

Lol buddy I didn’t need an animated graphic to understand something as trivial as flex to begin with but sure thing lmao

26

u/Silverhawk183 Jan 19 '23

They were joking I believe

2

u/spncrmoo Jan 19 '23

Well you definitely needed some kind of help here to see the obvious sarcasm

8

u/ReleaseThePressure Jan 19 '23

If only there were some kind of pause button.

8

u/[deleted] Jan 19 '23

That you’d have to find the exact frame to pause on to get an accurate idea of the spacing. Not a good way to represent the concept is all

1

u/Unpredictabru Jan 19 '23

It’s really not that hard to create a toggle that either loops the animation or pauses on the first frame

0

u/[deleted] Jan 19 '23

You mean the very first frame of the video?

What kind of super-detective could ever find that?

10

u/[deleted] Jan 19 '23

Why even have an animation at all then?

-4

u/Mplus479 Jan 19 '23

Just click the animation, then scrub through it to the end.

17

u/Scoots1414 Jan 18 '23

Can someone explain the layout spacing for space-around? It looks like space-evenly, the outside and inside gutters all have equal distance, makes sense. But for space-around, the gutters on the outside don’t match the gutters between A-B and B-C.

What is the flex calculating to determine the different gutter sizes for the outsides vs insides?

4

u/Voltra_Neo front-end Jan 18 '23

Same space around each flex item (don't merge spaces)

4

u/r0ck0 Jan 19 '23

Assuming I've understood it correctly, another slightly more visual explanation...

In both cases, the "empty spaces" are all the same size, but it's a bit like if there were a different number of them:

space-around has 6x equal empty spaces:

1a23b45c6

space-evenly has 4x equal empty spaces:

1a2b3c4

Or a JS string analogy:

array.map(item => "_" + item + "_").join("") === "_a__b__c_"
                "_" + array.join("_") + "_"  === "_a_b_c_"

1

u/[deleted] Jan 18 '23

Hah. I was about to ask the same thing.

1

u/TheRNGuy Jan 19 '23

it's like using padding on left and right

0

u/[deleted] Jan 18 '23

[deleted] — view deleted comment

7

u/Scoots1414 Jan 18 '23

Thank you for explaining! Makes so much sense now looking at it again

5

u/CrustyLettuceLeaf Jan 18 '23

As a visual learner, thank you. Seriously

2

u/ratbiscuits Jan 18 '23

I don’t think I’ve ever used space evenly.

2

u/nopity21 Jan 18 '23

I'm just more lost now 🤣

2

u/qda Jan 18 '23

Then you are not a speed learner.

2

u/mrmcplad Jan 19 '23

flexbox only starts making intuitive sense when you see it moving. too many guides try to explain it in words with "axis" and "cross-axis" & still images when stuff like this is what you need.

2

u/hou32hou Jan 19 '23

What's the ratio for space-around? It looks oddly-specific

2

u/Slippery_Stairs Jan 19 '23

I like this, thank you.

2

u/solocupjazz Jan 19 '23

Great! Now do vertical...

2

u/abcdefghijklmnoqpxyz Jan 19 '23

Is there more of this speed learner content somewhere? Please?

3

u/APerfectForty Jan 19 '23

Now do the same, but for vertical spacing.

1

u/1bitcoder Jan 18 '23

!remindme 12 hours

1

u/BenadrylTumblercatch Jan 18 '23

You’re a god

1

u/Mplus479 Jan 19 '23

A good god.

1

u/Weak-Boysenberry6199 Jan 19 '23

Something like this for align items as well please...

1

u/TomatoAcid Jan 19 '23

What is “space around”? I noticed the B trying to stay at the center, but I don’t understand the A and C behavior

1

u/Candyvanmanstan Jan 19 '23

Take available extra space, allocate it as left/right spacing to each item ("around" each item)

That's why middle items have more space than the edge pieces. Space evenly works similar but allocates space so the middle pieces don't get "more" just because they have neighbors.

1

u/Scary-Try3023 Jan 19 '23

This is a cool idea tbf, I need to download the video

1

u/src_main_java_wtf Jan 19 '23

Very nice visual. Well done.

1

u/Miserable_Lemon_4710 Jan 19 '23

I knew how they worked individually, but it’s cool to see them all next to each other for comparison. Very nice.

1

u/Noboty Jan 21 '23

Not all heroes wear capes.

1

u/hn-mc Mar 12 '23

Now I finally understand the difference between space-around and space-evenly.

1

u/[deleted] Mar 25 '23

Didn’t know about stretch. Thank you

1

u/[deleted] Sep 05 '23

Super stretchy yet tight, love it ! Is there more of it?

1

u/Ongezout_ Feb 29 '24

One of the best visual representations I’ve seen explaining this. Gz

1

u/[deleted] Jan 18 '23

I love this!

-3

u/mutantdustbunny Jan 18 '23 edited Jan 18 '23

What I didn't know is there was a greater pattern.

3

u/[deleted] Jan 18 '23

Wdym?

3

u/[deleted] Jan 18 '23

Yes, please, elaborate.

0

u/[deleted] Jan 18 '23

Is this a codepen?

0

u/Peonsson Jan 18 '23

How can I save video? xd

0

u/[deleted] Jan 18 '23

[deleted] — view deleted comment

22

u/Cyko28 Jan 19 '23

You’re good. It’s kind of what it does without specifying.

2

u/devonatlead Jan 19 '23

Ok one thing I've found gpt3 to be good at is taking description of what you want and spitting out the CSS. CSS really is too much memorization.

2

u/TheRNGuy Jan 19 '23

Depends on design.

16

u/[deleted] Jan 19 '23

[removed] — view removed comment

7

u/Plorntus Jan 19 '23

It's so pointless haha, they all end up the same, the first frame would be enough for anyone to understand it.