중첩된 컨테이너 없이 다양한 뷰포트에서 Flexbox 항목을 어떻게 다시 정렬할 수 있습니까?

다양한 뷰포트에서 가변 순서로 요소 재배치

1, 2, 3 순서로 정렬된 3개의 div가 있는 컨테이너가 있습니다. 모바일에서는 더 큰 화면에서는 어려움에 직면해 있습니다. flex 및 order 속성은 모바일에서 효과적으로 작동하는 것처럼 보이지만 데스크톱에서는 원하는 배열을 생성하지 못합니다.

Row Wrap의 Flexbox 제한 사항

핵심 문제는 다음에 있습니다. 행 줄 바꿈과 관련하여 Flexbox의 본질적인 한계. Flex 항목은 새 행으로만 줄 바꿈할 수 있으므로 동일한 행의 다른 항목 아래로 줄 바꿈되지 않습니다. 이로 인해 짧은 항목이 올바르게 정렬되지 않는 데스크탑 레이아웃에 간격이 생깁니다.

대체 솔루션

원하는 레이아웃을 얻기 위한 한 가지 접근 방식은 div 2와 3을 래핑하는 것입니다. 추가 용기에. 이렇게 하면 수직 플렉스 방향이 있는 중첩된 플렉스 컨테이너가 생성되어 항목이 틈 없이 올바르게 정렬됩니다. 그러나 이 솔루션은 모든 항목이 동일한 상위 항목을 공유해야 한다는 요구 사항과 충돌합니다.

열 줄 바꿈을 솔루션으로

또는 행 줄 바꿈 대신 열 줄 바꿈을 사용하는 것이 좋습니다. . 컨테이너를 열 가변상자로 정의하면 항목을 수직으로 정렬하여 간격을 없앨 수 있습니다. 데스크톱에서는 컨테이너가 플렉스 랩으로 전환되어 div 2와 3이 원하는 대로 재배열될 수 있습니다.

이 접근 방식을 사용하려면 플렉스 속성을 조정하고 모바일 및 데스크톱 보기 모두에서 적절한 정렬을 보장하기 위해 추가적인 CSS 수정이 필요합니다.

위 내용은 중첩된 컨테이너 없이 다양한 뷰포트에서 Flexbox 항목을 어떻게 다시 정렬할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!