5
Medya sorgularından kurtulmayı ve yalnızca problemimi çözmek için flexbox kullanmamı umuyorum, ancak bunun mümkün olup olmadığından emin değilim. Pencere küçüldükçe, sütunların minimum genişliklerine ulaşana kadar küçülmesini istiyorum. Bunu bir kez vurduklarında, ortadaki sütun sarma için aşağıya atlar.Esnek bir öğe sarıldığında esnek kutu algılanabilir mi?
Sanırım sorumum bu şekilde kaynıyor, esnek bir kutu sarıldığında algılayabilir mi? Eğer öyleyse, sarf malzemelerinin sırasını kesinlikle CSS ile değiştirmesini isteyebilir miyim? İşte
ben "medya sorguları kullanarak gerçekleştirmek çalışıyorum şeyin codepen olduğunu. Bir esnek madde sarar zaman.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>