All geek questions in one place

Can flexbox determine when a flex element wraps around?

I hope to get rid of media queries and just use flexbox to solve my problem, but I'm not sure if this is possible. When the window gets smaller, I want the columns to shrink until they reach the minimum width. Once they hit it, the middle column will jump down to wrap.

I think my question boils down to this - can flexbox detect when it wraps up? If so, can I suggest that he reorder the elements on the wrapper using strictly CSS?

Here is the codepen of what I'm trying to accomplish using media queries.

.wrapper { display: flex; justify-content: center; margin: 5px; flex-wrap: wrap; } .red { background-color: red; height: 240px; margin: 5px; width: 500px; order: 0; } .yellow { background-color: yellow; margin: 5px; height: 240px; min-width: 240px; max-width: 400px; flex: 1; order: 1; } .blue { background-color: blue; height: 240px; margin: 5px; min-width: 350px; max-width: 400px; flex: 1; order: 2; } @media (max-width:1130px) { .yellow { order: 4; } } 
 <div class="wrapper"> <div class="red"></div> <div class="yellow"></div> <div class="blue"></div> </div>
+5
source share
1 answer

Can flexbox detect when a flex element wraps around?

No.

In CSS, when the browser renders the page at the start stage, it does not overpay the document when the element is wrapped. As a result, the parent elements do not know when their children are wrapped.

That is why containers are not compressed before their contents after packaging.

To do this, you need media queries or JavaScript.

Here are some more details:

+1
source

Source: https://habr.com/ru/post/1266746/

More articles:


All Articles