Flex 항목이 새 행에서 전체 너비를 차지하도록 만드는 방법은 무엇입니까?

특정 항목에 대한 Flex Row 전체 너비

"레이블" 요소가 다른 두 개의 플렉스 아래 전체 너비를 차지하도록 강제하는 것을 목표로 합니다. 배치된 요소. 이를 달성하는 방법은 다음과 같습니다.

일반적으로 플렉스 항목은 사용 가능한 공간을 동일하게 공유합니다. 그러나 하나의 항목(레이블)이 새 행의 남은 공간 전체를 차지하도록 하려고 합니다. 이렇게 하려면:

1. 항목 너비를 100%로 설정: 레이블 요소의 너비를 100%로 지정하거나 flex-basis: 100%를 사용합니다. 이렇게 하면 남은 수평 공간을 모두 소모하게 됩니다.
2. 컨테이너 랩 활성화: 상위 컨테이너를 조정하여 래핑(flex-wrap: 랩)을 활성화합니다. 이렇게 하면 공간이 부족할 때 형제 요소가 새 행으로 흐르게 됩니다.

업데이트된 코드는 다음과 같습니다.

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

.error {
  flex: 0 0 100%;
  border: 1px dashed black;
}

이러한 조정을 통해 레이블 요소는 다음 행의 전체 너비에 걸쳐 있게 됩니다. 원하는 대로 다른 두 개의 플렉스 항목 아래 행에 추가하세요.

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