내 Flexbox 항목이 제대로 포장되지 않는 이유는 무엇입니까?

Flex 항목 래핑 문제 해결

Flexbox를 사용하여 동일한 높이 요소의 여러 행을 생성할 때 항목이 제대로 래핑되지 않는 문제가 발생하는 것이 일반적입니다. . 이는 플렉스 컨테이너의 기본 동작이 래핑을 방지하는 것이기 때문에 발생합니다(flex-wrap: nowrap).

래핑을 활성화하려면 flex-wrap을 다음과 같이 설정하세요.

#list-wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

Flex 컨테이너 이해 속성:

• display: flex: 요소를 Flex 컨테이너로 초기화하여 항목을 단일 행이나 열로 정렬합니다.
• flex-wrap: Wrap: 항목을 래핑할 수 있습니다. 컨테이너.
• flex-wrap: nowrap: 항목이 래핑되는 것을 방지하여 한 줄로 제한합니다.

예:

다음 예를 고려하여 높이가 같은 3개의 행을 만듭니다. 사각형:

#list-wrapper {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid black;
}

#list-wrapper div {}

#list-wrapper div img {
  height: 150px;
  width: 150px;
}

<div>

위 내용은 내 Flexbox 항목이 제대로 포장되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!