화면 너비에 따라 CSS Flexbox를 사용하여 Div를 어떻게 재정렬할 수 있습니까?

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

반응형 웹사이트를 만들 때 다양한 기기에서 원하는 레이아웃을 유지하는 것이 가능합니다. 도전. 그러한 문제 중 하나는 화면 크기가 변경될 때 div가 재배치되는 것입니다. 작은 화면에서는 div를 수직으로 쌓는 것이 간단하지만 레이아웃에 따라 다르게 정렬하는 것은 더 복잡할 수 있습니다.

예를 들어 두 개의 div 열이 있는 시나리오를 생각해 보겠습니다. 큰 화면에서는 div가 가로로 표시되지만 화면 너비가 좁아지면 세로로 쌓입니다. 그러나 세로 레이아웃의 div에는 특정 순서가 필요합니다.

전통적으로 이러한 작업에는 JavaScript가 사용되었습니다. 그러나 이 시나리오에서는 JavaScript가 옵션이 아닙니다. 따라서 목표를 달성하기 위해 다목적 CSS flexbox 사양을 사용합니다.

'order' 및 'flex-flow' 속성을 사용하면 요구 사항을 충족하는 레이아웃을 만들 수 있습니다. 이 솔루션은 IE10에 대한 공급업체 접두사가 있지만 모든 에버그린 브라우저와 IE11에서 지원됩니다.

CSS에서는 너비, 높이, 인라인 블록 표시와 같은 div 속성을 정의합니다. 또한 각 div에 색상 클래스를 할당합니다.

다음으로 화면 너비가 531px 아래로 떨어질 때 활성화되는 미디어 쿼리를 정의합니다. 이 쿼리 내에서 컨테이너의 표시 속성을 'flex' 및 'column'으로 수정하여 더 좁은 화면에서 div가 세로로 쌓이도록 합니다.

그런 다음 div가 세로로 표시되는 순서를 지정합니다. 공들여 나열한 것. 'order' 속성을 사용하여 수직 스택의 상단 근처에 표시되어야 하는 div에 더 높은 순서 값을 할당합니다.

다음은 예시입니다.

.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 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 Flexbox를 사용하여 Div를 어떻게 재정렬할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!