Flex 항목을 다른 Flex 항목 아래의 전체 행에 걸쳐 만드는 방법은 무엇입니까?

전체 너비 Flex 항목을 전체 행에 강제 적용

문제:

flex 레이아웃의 목표는 처음 두 개의 하위 요소를 단일 행에 유지하고 세 번째 요소를 유지하는 것입니다. 아래의 자체 전체 너비 행을 차지합니다. 이 문제는 처음 두 요소에 대해 flex-grow 및 flex-shrink 속성을 활용하는 동시에 세 번째 요소가 상위 컨테이너의 전체 너비까지 확장되고 처음 두 요소 아래에 표시되도록 하려는 욕구에서 발생합니다.

해결책:

세 번째 요소의 너비가 100%가 되도록 강제하고 다른 요소 아래의 새 행에 표시하려면 two:

• flex-basis를 세 번째 요소에 100%로 설정합니다. 이렇게 하면 해당 행에서 사용 가능한 모든 공간을 차지하고 새 줄로 푸시됩니다.
• flex-wrap을 구현합니다: 상위 컨테이너에 래핑합니다. 이를 통해 플렉스 항목을 여러 행으로 감싸서 현재 행의 너비에 맞지 않는 항목을 수용할 수 있습니다.

예제 코드:

.parent {
  display: flex;
  flex-wrap: wrap;
}

#range, #text {
  flex: 1;
}

.error {
  flex: 0 0 100%; /* flex-grow, flex-shrink, flex-basis */
  border: 1px dashed black;
}

<div class="parent">
  <input type="range">

이 접근 방식을 사용하면 처음 두 요소는 동일한 행을 차지하여 사용 가능한 너비를 공유하고 세 번째 요소는 상위 컨테이너의 전체 너비에 걸쳐 있습니다. 아래의 새로운 행에 배치됩니다.

위 내용은 Flex 항목을 다른 Flex 항목 아래의 전체 행에 걸쳐 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!