CSS Flexbox에서 요소 래핑을 제어하는 ​​방법은 무엇입니까?

CSS Flexbox의 유연한 요소 래핑 제어

CSS flexbox 요소가 래핑되어야 하는 요소를 지정해야 하는 필요성은 플렉스박스 표준. 하지만 이 효과를 얻기 위해 영리한 기술을 사용할 수 있습니다.

특정 요소 뒤에 강제로 래핑하려면 다음 단계를 따르세요.

1. 디스플레이 설정: flex; 플렉스 랩: 랩; 컨테이너 요소에서.
2. 다음에 래핑하려는 요소에서 flex-basis: 100%;를 설정합니다.

이 솔루션은 요소의 최소 너비를 효과적으로 설정합니다. 필요할 때 자체 줄로 전환합니다.

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

<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;
  list-style: none;
}

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

네 번째 요소 다음에 항목을 래핑하여 두 줄을 만듭니다.

1 2
3 4

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