justify-content: space-between Causes Unexpected Markup - Deepstash

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.

1

STASHED IN:

4

STASHED IN:

0 Comments

MORE IDEAS FROM THE ARTICLE

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 title text as a basis and add more details about the image. For example, if you have a product card with a title and an image, you can use alt to describe the external characteristics of the product.

STASHED IN:

4

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 menu of such an element, with options: “Open in a new tab”, “Open in a new window”, & “Open in a private window”.

When users see those items, they think that it is a link and they can open it, for example, in a new tab. When they do this, they get an unexpected result – they see the top of the page.

1

STASHED IN:

4

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 example a modal window with a cross button beyond the window, which makes it unavailable. You need to zoom out of the page to close it.

It can be solved by using the margin property set to auto. Inside a flex container, the auto value will be calculated based on the size of the container and its flex items.

1

STASHED IN:

4

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 moving elements.

Thus, if we create this type of animation, we should use the prefers-reduced-motion media feature. In this case, if people disable animations in the operating system, they won’t be displayed, and if they don’t do this, the animations will work. And we are going to take care of our users.

STASHED IN:

4

Deepstash helps you become inspired, wiser and productive, through bite-sized ideas from the best articles, books and videos out there.

GET THE APP:

RELATED IDEAS

The Problem With Quitting
  • It has been internalized in us since childhood that we should never give up, and that quitting is bad.
  • Many of us are stuck in the wrong jobs and due to this idea of not quitting, we waste a lot of productive years.
  • We don’t quit because of a cognitive bias known as the sunk cost fallacy, which basically means we continue to do something that is not helping us, but because we have already invested our time, energy and resources.

Example: We don’t quit reading a half-finished book even if the content is not helping us in any way.

6

STASHED IN:

169

STASHED IN:

0 Comments

1. It’s not just about UX. It’s also about customer experience

Technical issues are the number one reason why apps get deleted, so make sure you understand customer experience (CX) through all phases of the product life cycle. CX is the sum of the user’s interaction with the app or product, starting at the consideration stage and moving through support, upgrades, and eventual replacement or removal from use. Think about the interactions with your customer during each of these phases—before, during, and after they use your products.

2

STASHED IN:

7

The Agile Method To Organize Your Life

The Agile prioritization techniques help us break tasks into tiny subtasks and then rank them from top priority to least priority.

  • It is hard to prioritize a long list of tasks, all of which seem important.
  • Completing a task, no matter how insignificant, releases dopamine inside our brains, giving it a feel-good reward.
  • The Agile method makes large tasks easier to do and makes us more productive.

11

STASHED IN:

342

STASHED IN:

0 Comments