측면 상자가 고르지 않은 Flexbox 컨테이너의 중간 항목을 중앙에 배치하는 방법은 무엇입니까?

비대칭 측면 상자가 있는 가운데 항목을 중앙에 배치

인접 항목의 너비가 다른 경우 컨테이너의 가운데 항목을 중앙에 배치하는 것이 목표입니다. 콘텐츠 오버플로에 관계없이 적절한 정렬을 유지합니다.

사용 Flexbox

Flexbox는 중첩 컨테이너와 자동 여백을 사용하는 솔루션을 제공합니다.

.container {
  display: flex;
}

.box {
  flex: 1;
  display: flex;
  justify-content: center;
}

.box:first-child > div { margin-right: auto; }
.box:last-child  > div { margin-left: auto; }

설명:

• 가장 바깥쪽 컨테이너 가로로 늘어나는 플렉스 컨테이너입니다.
• 각각 "box" 요소는 내용이 중앙에 있는 플렉스 컨테이너이기도 합니다.
• "margin-right: auto;" 첫 번째 상자의 내부 요소는 컨테이너 가장자리에 오른쪽으로 밀어 넣어 효과적으로 왼쪽과 정렬됩니다.
• "margin-left: auto;" 마지막 상자의 내부 요소는 컨테이너 가장자리를 왼쪽으로 당겨서 오른쪽에 정렬합니다.
• 프레젠테이션 목적으로 추가 스타일(예: 높이, 패딩)을 추가할 수 있습니다.

예:

<div class="container">
  <div class="box"><div class="inner">short box</div></div>
  <div class="box"><div class="inner">centered box</div></div>
  <div class="box"><div class="inner">looooooooooooooooooooooong box</div></div>
</div>

<p>→ true center</p>

이 접근 방식은 콘텐츠가 넘쳐도 측면 상자의 너비와 상관없이 중간 요소입니다.

위 내용은 측면 상자가 고르지 않은 Flexbox 컨테이너의 중간 항목을 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!