CSS Flexbox에서 요소 줄 바꿈을 제어하는 ​​방법: Flexbox가 특정 요소 뒤에 강제로 줄 바꿈되도록 할 수 있나요?

CSS Flexbox에서 요소 래핑을 제어하는 ​​방법

질문:

방법이 있나요? Flexbox 레이아웃에서 래핑이 발생해야 하는 요소를 지정하려면? 이는 추가 마크업을 추가하지 않고 목록의 응답성을 제어하는 ​​데 유용합니다.

답변:

명시적인 "flex-break" 속성은 없지만 Flexbox 표준에서는 다음 기술을 결합하여 이 효과를 얻을 수 있습니다.

1. "flex-wrap: Wrap;" 설정 컨테이너에서: 필요에 따라 항목을 새 줄로 줄 바꿈할 수 있습니다.
2. "flex-basis: 100%;"를 사용합니다. 중단하려는 하위 요소에서: 이는 브라우저에 해당 요소의 최소 너비를 100%로 설정하여 효과적으로 새 줄에서 시작하도록 지시합니다.

예:

<code class="css">ul {
  display: flex;
  flex-wrap: wrap;
}

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

이 예에서 목록의 항목은 사용 가능한 공간에 따라 다른 모든 요소 다음에 새 줄로 줄 바꿈됩니다. "nth-child()" 값을 조정하면 랩을 발생시키는 요소를 제어할 수 있습니다.

더 완전한 데모를 보려면 제공된 JSFiddle(http://jsfiddle.net/theazureshadow/ww8DR)을 참조하세요. /

위 내용은 CSS Flexbox에서 요소 줄 바꿈을 제어하는 ​​방법: Flexbox가 특정 요소 뒤에 강제로 줄 바꿈되도록 할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!