다른 Flex 항목으로 둘러싸여 있을 때 컨테이너 내에서 Flex 항목을 중앙에 배치하는 방법은 무엇입니까?

다른 Flex 항목으로 둘러싸여 있을 때 컨테이너의 Flex 항목을 중앙에 배치하려면

다른 Flex 항목으로 둘러싸여 있을 때 컨테이너 내에서 Flex 항목을 중앙에 배치하려면 , 다음을 고려하십시오.

기존 방법

• justify-content 및 margin: auto 사용: 총 길이가 동일한 경우 중심 항목의 양쪽에 있는 플렉스 항목을 사용하면 이러한 속성을 통해 효과적으로 정렬할 수 있습니다.

대체 접근 방식

• 길이 포함 및 균형 조정 : 중앙에 있는 아이템을 별도의 플렉스 컨테이너에 포장하고 양쪽에 있는 형제 플렉스 아이템의 총 길이가 동일하도록 합니다. 이렇게 하면 중앙에 있는 항목이 나머지 공간을 차지하고 중앙에 정렬됩니다.

예제 코드

다음 예에서 h2는 다음을 사용하여 올바르게 중앙에 배치됩니다. 대체 접근 방식을 사용하여 양쪽에 있는 범위 항목의 전체 길이를 동일하게 보장합니다.

HTML:

<code class="html"><div class="container">
  <div>
    <span>I'm span 1</span>
    <span>I'm span 2</span>
    <span>I'm span 3</span>
  </div>
  <h2>I'm an h2</h2>
  <div>
    <span>I'm span 4</span>
    <span>I'm span 5</span>
    <span>I'm span 6</span>
  </div>
</div></code>

CSS:

<code class="css">.container {
  align-items: center;
  display: flex;
  justify-content: center;
  border: 1px solid red;
}

.container div {
  flex: 1 1 auto;
  text-align: center;
}

h2 {
  flex: 0 0 auto;
  margin: auto;
}</code>

위 내용은 다른 Flex 항목으로 둘러싸여 있을 때 컨테이너 내에서 Flex 항목을 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!