고르지 않은 주변 요소가 있는 컨테이너에서 Flex 항목을 중앙에 배치하는 방법은 무엇입니까?

다른 Flex 항목 가운데 컨테이너의 Flex 항목 중앙에 배치

과제:

다양한 수의 요소.

접근 방식:

플렉스 정렬 속성은 컨테이너 내의 여유 공간을 분산하므로, 고르지 않은 형제 사이에 단일 항목을 중앙에 배치하는 것은 추가 조치 없이는 어렵습니다.

고려사항:

전체 길이가 주변 요소가 항목 양쪽에서 동일하면 중심 정렬이 가능해집니다.

해결책:

컨테이너에 남아 있는 내용과 동일한 전체 길이를 보장합니다.

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

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

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

h2 {
  flex: 0 0 auto;  // Prevent h2 from affecting flex sizing
  margin: auto;   // Center within its container
}</code>

설명:

내부

컨테이너를 "1 1 auto"로 설정하면 Flex 컨테이너 내에서 동일한 공간을 차지합니다.

의 flex 속성은 flex 공간 분포에서 제외되어 "0 0 auto"로 설정됩니다. 여백 자동은

컨테이너.

추가 정보:

• 요소는 해당
  텍스트 정렬 속성으로 인해 컨테이너가 손상되었습니다.
• 이 접근 방식은

  완벽하게, 주변 컨텐츠의 길이가 동적인 경우에는 적합하지 않을 수 있습니다.