After I write CSS, I want there’s a option to have flex-wrap detection in CSS. In some instances, I design a easy part that’s responsive with flex-wrap, however the level is that I wish to have much more management and be capable of detect when an merchandise is wrapped. This publish goes into extra element about one of many needs I’ve for CSS in 2023.
On this publish, 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.
.listing {
show: flex;
flex-wrap: wrap;
}
It’s that straightforward.
Flex wrapping detection examples
I are inclined to keep away from utilizing flex-wrap when constructing a website header. I favor to make use of a media question and estimate the most secure breakpoint to cover the navigation and present the cellular menu toggle.
Think about the next instance.
.site-header {
show: flex;
align-items: heart;
}
@media (max-width: 600px) {
.site-header {
}
}
To make the positioning header responsive, I add a media question within the second state. The reason being I assume that the navigation may get an extra merchandise and there may be nonetheless sufficient area for it.
If I do the cellular stuff within the third state, the design may fail when the navigation has extra objects.
If I’ve flex-wrap state detection, this can make my job loads simpler. I can think about one thing like this:
.site-header {
show: flex;
flex-wrap: wrap;
align-items: heart;
}
.site-header:has(.nav:wrap) {
}
I used :has as a result of I have to know if the baby 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.
Think about the next determine:
The media question gained’t know that now we have extra navigation objects, thus the necessity to kick in. It really works based mostly on the viewport width, not our content material.
When engaged on a multilingual web site, the identical navigation objects for English may look totally different in size in comparison with Arabic, for instance.
Think about the next instance.
When the viewport measurement will get smaller, the media question may kick in too early. This doesn’t occur on a regular basis, nevertheless it’s attainable. What I can do in such a case is to have a brand new media question, only for the RTL format.
@media (max-width: 700px) {
html[dir="rtl"] {
.site-header {
}
}
}With flex-wrap detection, the navigation will work whatever the content material size.
.site-header:has(.nav:wrap) {
}Tabs
We are able to use flexbox to put out a tabs part. On cellular, I need 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 attainable within the present CSS (besides with hacks I don’t favor to make use of). We are able to use a media question to do this, nevertheless it’s not good.
@media (min-width: 600px) {
.tabs {
show: flex;
flex-wrap: wrap;
}
}Once more, the media question above doesn’t know something in regards to the content material. It’s simply an estimation from the front-end developer.
As you see, it may well fail when now we have 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 may look bizarre when it’s wrapped. We don’t know when that may occur.
If now we have flex-wrap detection, the job will likely 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 a couple of examples of the place flex wrapping detection could be useful. I consider having this characteristic is the closest factor to a content material question in CSS.
What about you? Do you assume that this characteristic must be applied in CSS?
