Can flexbox detect when a flex item wraps?

Question

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

I think my question boils down to this- can flexbox detect when it wraps? If so, can I prompt it to change the order of the items on wrap with strictly CSS?

Here is a 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>

Answer 1

Can flexbox detect when a flex item wraps?

No.

In CSS, once the browser renders the page on the initial cascade, it doesn't reflow the document when an element wraps. As a result, parent elements don't know when their children wrap.

That's why containers don't shrink-to-fit their content after wrapping.

That's why you need media queries or JavaScript.

Here are some more details:

• Make container shrink-to-fit child elements as they wrap
• How to center a flex container but left-align flex items