CSS Flexbox에서 요소 래핑을 제어하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

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

Susan Sarandon

풀어 주다： 2024-10-30 09:22:03

원래의

338명이 탐색했습니다.

How to Control Element Wrapping in CSS Flexbox?

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

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

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

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

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

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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