Flex 항목이 다른 Flex 항목 아래 행의 전체 너비에 걸쳐 있도록 만드는 방법은 무엇입니까?

행의 전체 너비 Flex 항목

아래에 세 번째 항목을 배치하는 동시에 단일 행에 처음 두 개의 하위 요소를 유지하는 것을 목표로 합니다. 이를 위해 flex를 활용하여 전체 너비로 표시합니다. 레이아웃.

질문:

"label" 요소가 처음 두 개의 가변 위치 요소 아래 행의 전체 너비에 걸쳐 있도록 어떻게 강제합니까?

정답:

Flex 항목을 강제로 전체 행을 확장하고 width: 100% 또는 flex-basis: 100%를 적용하고 컨테이너에서 래핑을 활성화합니다. 다음 조정을 통해 이를 달성할 수 있습니다.

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

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

이러한 변경 사항을 통해 "레이블" 요소는 처음 두 하위 요소에 대해 원하는 플렉스 위치를 유지하면서 다른 두 요소 아래의 전체 너비를 차지합니다.

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