Flexbox의 특정 지점에서 요소 줄바꿈

Flexbox 레이아웃에서 flex-wrap 속성을 사용하면 요소가 다음 줄로 줄바꿈할 수 있습니다. 컨테이너 너비가 초과되었습니다. 그러나 현재 어떤 요소가 줄 바꿈을 트리거해야 하는지 지정하는 표준 방법은 없습니다.

특정 요소 다음에 강제로 줄 바꿈하는 한 가지 해결 방법은 특정 너비. 이렇게 하면 요소가 상위 컨테이너의 전체 너비를 차지하게 되어 요소 뒤의 줄이 효과적으로 끊어집니다.

/* Inside a media query targeting a specific width */
li:nth-child(2n) {
  flex-basis: 100%;
}

예를 들어 다음 CSS는 두 항목마다 목록 항목을 래핑합니다.

ul {
  display: flex;
  flex-wrap: wrap;
}

li:nth-child(2n) {
  flex-basis: 100%;
}

이 방법은 추가 마크업 없이 래핑 동작을 제어하는 ​​유연한 방법을 제공합니다. 그러나 이는 미디어 쿼리에 의존하므로 일부 상황에서는 성능 오버헤드와 제한이 발생할 수 있다는 점에 유의하는 것이 중요합니다.