Flexbox 목록을 특정 위치에서 강제로 래핑하는 방법은 무엇입니까?

특정 위치에서 Flexbox 목록을 분리하는 방법

특정 요소 다음의 특정 위치에서 Flexbox 목록을 분리하려는 상황이 발생합니다. 레이아웃의 반응성을 향상시킵니다. Flexbox 표준은 이를 명시적으로 지원하지 않지만 사용할 수 있는 트릭이 있습니다.

CSS Magic

특정 요소 뒤에 강제로 래핑하려면 다음 CSS를 추가하세요. 컨테이너에:

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

다음으로 줄 바꿈을 수행하려는 요소에 이 CSS를 추가합니다.

<code class="css">li:nth-child(4n) {
  flex-basis: 100%;
}</code>

여기서 "4n"은 컨테이너에 있는 요소의 위치를 ​​나타냅니다. 목록(예: 4n은 네 번째 요소, 여덟 번째 요소 등을 의미함).

코드 예

예를 들어 다음 HTML 마크업을 고려하세요.

<code class="html"><ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul></code>

그리고 함께 제공되는 CSS:

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

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

이 설정을 사용하면 두 번째 요소마다 목록이 줄바꿈되어 다양한 화면 크기에 적응하는 반응형 레이아웃이 생성됩니다.

위 내용은 Flexbox 목록을 특정 위치에서 강제로 래핑하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!