5
미디어 쿼리를 없애고 플렉스 박스를 사용하여 문제를 해결하기를 희망합니다. 그러나 이것이 가능한지 확실하지 않습니다. 창 크기가 작아지면 최소 너비에 도달 할 때까지 열이 줄어들 길 원합니다. 일단 그들이 그것을 명중하면, 중간 란은 포장을 위해 뛰어 내릴 것이다.플렉스 박스는 플렉스 아이템이 랩핑 할 때 감지 할 수 있습니까?
내 생각에이 질문에 대한 답변 - flexbox가 랩핑 할 때 감지 할 수 있습니까? 그렇다면, 엄격하게 CSS로 감싸는 항목의 순서를 변경하라는 메시지를 표시 할 수 있습니까? 여기
내가 "미디어 쿼리를 사용하여 달성하기 위해 노력하고 무엇을 codepen이다. 플렉스 항목을 래핑 할 때.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>