Friday, March 29, 2024
HomeCSSDo we want CSS flex-wrap detection?

Do we want CSS flex-wrap detection?


After I write CSS, I want there’s a strategy to have flex-wrap detection in CSS. In some circumstances, I design a easy part that’s responsive with flex-wrap, however the level is that I wish to have much more management and have the ability to detect when an merchandise is wrapped. This put up goes into extra element about one of many needs I’ve for CSS in 2023.

On this put up, I’ll attempt to clarify why we want it and what the use-cases can get profit from that.

Flex wrapping

To get you into the context, flex-wrap is a method that we are able to resolve if flex objects ought to wrap into a brand new line or not. Permitting the flex objects to wrap may end up in a part that works responsively no matter its container width.

.record {
  show: flex;
  flex-wrap: wrap;
}

It’s that straightforward.

Flex wrapping detection examples

I are likely to keep away from utilizing flex-wrap when constructing a website header. I desire to make use of a media question and estimate the most secure breakpoint to cover the navigation and present the cell menu toggle.

Contemplate the next instance.

.site-header {
  show: flex;
  align-items: middle;
}

@media (max-width: 600px) {
  .site-header {
    /* Disguise the navigation, and present the cell menu toggle. */	
  }
}

To make the positioning header responsive, I add a media question within the second state. The reason being I assume that the navigation would possibly get an extra merchandise and there’s nonetheless sufficient area for it.

If I do the cell stuff within the third state, the design would possibly fail when the navigation has extra objects.

If I’ve flex-wrap state detection, this can make my job rather a lot simpler. I can think about one thing like this:

.site-header {
  show: flex;
  flex-wrap: wrap;
  align-items: middle;
}

.site-header:has(.nav:wrap) {
  /* Disguise the navigation, and present the cell menu toggle. */	
}

I used :has as a result of I must know if the little one merchandise is wrapped (The navigation hyperlinks, in our case).

You could be questioning if each the media question and the flex-wrap detection give us the identical outcome. Right, however that’s not at all times the case.

I can break the media query-based navigation by simply including an extended textual content.

Contemplate the next determine:

The media question gained’t know that we’ve got extra navigation objects, thus the necessity to kick in. It really works primarily based on the viewport width, not our content material.

When engaged on a multilingual web site, the identical navigation objects for English would possibly look completely different in size in comparison with Arabic, for instance.

Contemplate the next instance.

When the viewport dimension will get smaller, the media question would possibly kick in too early. This doesn’t occur on a regular basis, however it’s doable. What I can do in such a case is to have a brand new media question, only for the RTL structure.

@media (max-width: 700px) {
  html[dir="rtl"] {
    .site-header {
      /* Customized CSS... */
    }
  }
}

With flex-wrap detection, the navigation will work whatever the content material size.

.site-header:has(.nav:wrap) {
  /* Disguise the navigation, and present the cell menu toggle. */	
}

Tabs

We are able to use flexbox to put out a tabs part. On cell, I would like the design to change to a listing as an alternative of tabs. The trick is to know when the tab objects are wrapped.

This isn’t doable within the present CSS (besides with hacks I don’t desire to make use of). We are able to use a media question to try this, however it’s not excellent.

@media (min-width: 600px) {
  .tabs {
    show: flex;
    flex-wrap: wrap;
  }
}

Once more, the media question above doesn’t know something concerning the content material. It’s simply an estimation from the front-end developer.

As you see, it could fail when we’ve got extra tabs. If we are able to detect when the primary flex merchandise is wrapped, we are able to repair that in a a lot clearer method.

.tabs {
  show: flex;
  flex-wrap: wrap;
}

.tabs:wrap {
  flex-direction: column;
  border-bottom: 0;	
}

.tabs:wrap .tab__item {
  flex: 1;
}

Auto margin and flex wrapping

Auto margins and flexbox are helpful. We are able to use it to push a flex merchandise to the far finish of its container.

.card {
  show: flex;
  flex-wrap: wrap;
}

.actions {
  margin-left: auto;
}

The problem right here is that the cardboard would possibly look bizarre when it’s wrapped. We don’t know when that can occur.

If we’ve got flex-wrap detection, the job shall be a lot simpler.

.card {
  show: flex;
  flex-wrap: wrap;
}

.card:wrap .actions {
  margin-left: preliminary;
}

.card:wrap .actions__item {
  /* present the label */
}

Conclusion

So, do we want flex wrapping detection? It’s a giant sure for me. The above are just a few examples of the place flex wrapping detection might be useful. I consider having this characteristic is the closest factor to a content material question in CSS.

What about you? Do you suppose that this characteristic ought to be applied in CSS?

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments