5 HTML and CSS Good Practices - DZone Web Dev

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.

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.

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.