justify-content: space-between Causes Unexpected Markup - Deepstash
Machine Learning With Google

Learn more about computerscience with this collection

Understanding machine learning models

Improving data analysis and decision-making

How Google uses logic in machine learning

Machine Learning With Google

Discover 95 similar ideas in

It takes just

14 mins to read

justify-content: space-between Causes Unexpected Markup

When Flexbox first appeared, many people liked the justify-content property, which allowed them to evenly distribute grid items using space-between or space-around. And of course, they began to use it. But there is one problem.

When we use these values, we don’t think that the number of items may change. For example, if I use space-between to add 2 more items to a 4-column grid, they will appear on each side of the parent and not at the beginning of the line as the user expects.

Therefore, it is better to use margin if you need IE11 support, or column-gap to set space between items.

7

20 reads

MORE IDEAS ON THIS

Take Care of Those Users Who May Experience Dizziness, Nausea, and Headaches

I think many designers and developers like to create animations. Yes, those interfaces look more interesting. But we have to be more careful.

In WCAG 2.2, there is section 2.3.3, which says that some users may experience dizziness, nausea, and headaches when they see animations that trigger...

6

15 reads

justify-content and align-items Lose Items

There is a problem that is especially common with vertical positioning. This is due to the way these properties work. The fact is that the justify-content and align-items properties ignore the size of flex items & they will go beyond its borders and may not be displayed correctly.

For examp...

6

14 reads

button type="button" Or href="#"

Developers often use anchor link to mark up interactive elements. The idea behind this is override the default link using JS and they will get button behavior.

At first glance, this makes sense. But there is a problem. Browsers still think it’s a link & right clicking it open the context me...

7

29 reads

alt-text Is Not a Duplicate Title

The alt attribute is quite useful. It helps screen reader users understand what is shown in the picture. Unfortunately, many developers don’t use it efficiently. They either duplicate the text around the picture or don’t add it at all.

But we can use alt differently. For example, use the ti...

8

48 reads

CURATED FROM

CURATED BY

sunnyprakash

Stashing some smashing ideas along the way.

Related collections

More like this

justify-content and align-items Lose Items

There is a problem that is especially common with vertical positioning. This is due to the way these properties work. The fact is that the justify-content and align-items properties ignore the size of flex items & they will go beyond its borders and may not be displayed correctly.

For examp...

Read & Learn

20x Faster

without
deepstash

with
deepstash

with

deepstash

Access to 200,000+ ideas

Access to the mobile app

Unlimited idea saving & library

Unlimited history

Unlimited listening to ideas

Downloading & offline access

Personalized recommendations

Supercharge your mind with one idea per day

Enter your email and spend 1 minute every day to learn something new.

Email

I agree to receive email updates