5
Mam nadzieję pozbyć się zapytań o media i po prostu użyć Flexbox, aby rozwiązać mój problem, ale nie jestem pewien, czy jest to możliwe. Gdy okno staje się mniejsze, chcę zmniejszyć kolumny, aż osiągną minimalną szerokość. Po ich uderzeniu środkowa kolumna przeskoczy w dół, aby zawinąć.Czy urządzenie Flexbox może wykryć, kiedy element elastyczny jest opakowany?
Myślę, że moje pytanie sprowadza się do tego - czy Flexbox może wykryć, kiedy się zawija? Jeśli tak, czy mogę poprosić go o zmianę kolejności elementów na opakowaniu przy użyciu ściśle CSS?
Oto codepen co ja "M chce osiągnąć za pomocą zapytań multimedialnych.
.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>