CSS를 사용하여 화면 너비에 따라 Div를 동적으로 재정렬하려면 어떻게 해야 합니까?

CSS를 사용하여 기기 너비에 따라 Div를 동적으로 재정렬

반응형 웹사이트를 만들 때 요소의 표시 및 순서를 관리하는 것이 필수적입니다. 화면 너비에 따라 div를 다시 정렬해야 하는 경우 일반적인 문제가 발생합니다. 이 작업은 더 적은 수의 div로 쉽게 수행할 수 있지만 숫자가 증가하면 더욱 복잡해집니다.

두 개의 Div로 열 생성

다음과 같은 간단한 시나리오부터 시작하겠습니다. 두 개의 div가 나란히 있습니다. 처음에는 CSS를 사용하여 두 개의 열을 만들 수 있습니다.

.container {
  width: 80%;
  margin: 0 auto;
}

.column-half {
  display: table-cell;
  padding: 25px;
  vertical-align: top;
  width: 40%;
}

.column-half-1 {
  float: left;
}

.column-half-2 {
  float: right;
}

이 접근 방식은 더 넓은 화면에서는 div를 나란히 배치하지만 화면이 너무 좁으면 수직으로 쌓습니다.

4개 열에 대한 도전

이 접근 방식을 4개 열로 확장하면 문제가 발생합니다. 부동 소수점을 사용하면 수평으로 정렬되는 4개의 열을 만들 수 있습니다. 하지만 좁은 화면에서는 이 순서를 쉽게 변경할 수 없습니다.

Flexbox를 사용한 해결 방법

이 문제의 해결 방법은 Flexbox 속성인 'order' 및 ' 플렉스 플로우'. Flexbox를 사용하면 행과 열 모두에서 요소의 레이아웃과 순서를 제어할 수 있습니다. 이러한 속성을 사용하면 더 넓은 화면의 레이아웃을 손상시키지 않고 더 좁은 화면에서 div의 순서를 정의할 수 있습니다.

.container {
  display: flex; /* Switches to a flex layout */
  flex-flow: column; /* Stacks elements vertically in narrower screens */
}

.column-quarter {
  width: 25%; /* Adjust percentage based on the number of columns */
}

.column-quarter-1 {
  order: 3; /* Defines the order in narrower screens */
}

.column-quarter-2 {
  order: 2;
}

.column-quarter-3 {
  order: 1;
}

.column-quarter-4 {
  order: 4;
}

이 솔루션을 사용하면 화면 너비가 허용할 때 div가 행으로 표시되고 자동으로 순서가 변경됩니다. 화면이 좁아질 때 지정된 순서에 따라 열로 분할됩니다. 이 방법은 행 및 열 레이아웃 모두에서 div 순서를 동적으로 관리하는 문제를 효과적으로 해결합니다.

위 내용은 CSS를 사용하여 화면 너비에 따라 Div를 동적으로 재정렬하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!