Flexbox에서 형제 사이에 Flex 항목을 중앙에 배치하는 방법은 무엇입니까?

다른 Flex 항목으로 둘러싸여 있을 때 Flex 항목을 중앙에 배치

Flexbox에서 항목 정렬은 일반적으로 컨테이너에 여유 공간을 분배하여 수행됩니다. 따라서 형제의 결합된 길이가 양쪽에서 동일하지 않으면 형제 사이에서 단일 Flex 항목을 중앙에 배치하는 것은 불가능합니다.

한 가지 해결 방법은 주변 Flex 항목을 자체 컨테이너 내에 래핑하는 것입니다. 이를 통해 공간 분포를 더욱 효과적으로 제어할 수 있으며 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 규칙을 조정하여 h2를 정렬할 수 있습니다.

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

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

h2 {
  margin: auto;
}</code>

범위를 별도의 div로 래핑하여 Flexbox 속성을 적용하면 개별 크기와 정렬을 제어하여 주변 요소 수에 관계없이 h2가 중앙에 유지되도록 할 수 있습니다.

위 내용은 Flexbox에서 형제 사이에 Flex 항목을 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!