다양한 화면 크기에 맞게 Flexbox 항목을 효율적으로 재배열하려면 어떻게 해야 합니까?

유연한 주문 속성: 모바일 및 데스크톱 보기에 대한 항목 재배열

컨테이너 내의 항목 레이아웃을 관리할 때 주문 속성은 Flexbox는 강력한 도구가 될 수 있습니다. 그러나 특히 모바일 및 더 큰 화면 보기를 위해 항목을 재배열하려고 하면 문제가 발생할 수 있습니다.

다음 시나리오를 고려하십시오. 컨테이너 내에 3개의 div가 있고 모바일에서 순서가 2, 1, 3으로 설정되어 있습니다. 주문 속성을 사용합니다. 이는 모바일 장치에서 잘 작동합니다. 하지만 큰 화면에서는 순서가 잘못 표시됩니다.

이 문제의 근본 원인은 Flexbox의 특성에 있습니다. Flexbox는 컨테이너 내의 공간을 분산하여 콘텐츠를 정렬하도록 설계되었습니다. 행 줄 바꿈 컨테이너에서는 항목을 임의로 줄 바꿈할 수 있는 그리드 시스템과 달리 항목을 새 행으로 줄 바꿈해야 합니다.

따라서 Flexbox 컨테이너에서 항목 div3은 그리드를 생성하므로 항목 div2 아래로 줄 바꿈할 수 없습니다. 직선이 아닌 레이아웃과 같습니다. 결과적으로 행에서 가장 높지 않은 항목 사이에 간격이 나타납니다.

이러한 보기 흉한 간격을 방지하려면 행 줄 바꿈 대신 열 줄 바꿈을 사용하는 것이 좋습니다. 열 줄 바꿈 컨테이너에서 항목은 새 열로 줄 바꿈되어 div2와 div3이 수직으로 정렬될 수 있는 레이아웃이 가능합니다.

예:

.container {
    display: flex;
    flex-direction: column;
    height: 200px;
}
div.orange {
  background-color: orange;
}
div.blue {
  order: -1;
  background-color: aqua;
}
div.green {
  background-color: lightgreen;
}
.container > div {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 800px) {
    .container {
        flex-wrap: wrap;
    }
    div.orange {
        flex-basis: 100%;
        width: 50%;
    }
    div.blue {
        flex-basis: 50%;
        width: 50%;
        order: 0;
    }
    div.green {
        flex-basis: 50%;
        width: 50%;
    }
}

이 예에서 모바일 레이아웃은 다음을 유지합니다. 2, 1, 3의 순서로 배열되는 반면 데스크탑 레이아웃은 항목을 1, 2, 3으로 재정렬합니다. 항목이 수직으로 배치되기 때문에 간격이 제거됩니다. 수평으로.

위 내용은 다양한 화면 크기에 맞게 Flexbox 항목을 효율적으로 재배열하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!