화면 크기에 따라 CSS를 사용하여 Div 순서를 어떻게 변경할 수 있습니까?

장치 너비에 따라 CSS를 사용하여 Div 순서 변경

반응형 웹사이트를 만들 때 다음과 같이 요소 순서를 관리하는 데 어려움을 겪는 것이 일반적입니다. 화면 크기가 변경됩니다. 2개 또는 3개의 div에 대한 간단한 솔루션이 존재하지만 요소 수가 증가하면 순서 지정이 더욱 복잡해집니다.

이 문제를 해결하기 위해 CSS의 flexbox 사양은 순서 및 플렉스 흐름 속성을 사용하는 강력한 솔루션을 제공합니다. 이러한 속성을 사용하면 인라인 블록 표시를 유지하면서 요소를 유연하게 정렬할 수 있습니다.

다음 솔루션은 질문에 언급된 요구 사항을 충족합니다.

• 요소는 처음에 행으로 표시됩니다.
• 화면 너비가 정의된 중단점 아래로 떨어지면 열 레이아웃으로 전환됩니다.
• 순서 열 레이아웃에서 요소의 개수를 수정하여 원하는 배열을 만듭니다.

HTML 구조:

<div class="container">
    <div class="one">I'm first</div>
    <div class="two">I'm second</div>
    <div class="three">I'm third</div>
    <div class="four">I'm fourth</div>
    <div class="five">I'm fifth</div>
</div>

CSS 스타일:

.container div {
    width: 100px;
    height: 50px;
    display: inline-block;
}

.one { background: red; }
.two { background: orange; }
.three { background: yellow; }
.four { background: green; }
.five { background: blue; }

@media screen and (max-width: 531px) {
    .container {
        display: flex;
        flex-flow: column;
    }
    .five { order: 1; }
    .four { order: 2; }
    .three { order: 3; }
    .two { order: 4; }
    .one { order: 5 }
}

이 솔루션을 사용하면 화면 너비가 너무 좁아지면 div가 스스로 재정렬됩니다. 지정된 순서에 따라 인라인 블록 레이아웃을 유지하고 내용과 크기를 유지합니다.

위 내용은 화면 크기에 따라 CSS를 사용하여 Div 순서를 어떻게 변경할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!