동적으로 크기가 조정된 형제 요소 사이에 중간 요소를 중앙에 배치하려면 어떻게 해야 합니까?

동적 형제 너비를 사용하여 중간 요소 중앙에 배치

가로로 정렬된 세 개의 상자와 상자 사이의 간격을 나타내는 점으로 구성된 레이아웃을 상상해 보세요.

[Left box]......[Center box]......[Right box]

사이드 박스 중 하나를 제거해도 센터 박스는 그대로 남아 있어야 합니다. 중앙:

[Left box]......[Center box].................

다른 측면 상자도 마찬가지로 제거할 때:

................[Center box].................

또한 중앙 상자 콘텐츠는 사용 가능한 공간을 채울 수 있도록 확장되어야 하며 측면 상자는 고정된 상태로 유지되어야 합니다. 크기. 오버플로는 콘텐츠를 자르기 위한 오버플로: 숨김 및 텍스트 오버플로: 줄임표로 처리됩니다.

[Left box][Center boxxxxxxxxxxxxx][Right box]

플렉스박스 구조는 요소를 수평으로 정렬하지만 측면 상자의 너비가 다른 경우 중앙 정렬을 유지하지 않습니다. 원하는 효과를 얻기 위해 중첩된 플렉스 컨테이너와 자동 여백을 도입합니다.

.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; }

이 전략은 자동 여백을 사용하여 측면 상자의 너비에 관계없이 중간 항목을 자동으로 중앙에 배치합니다. 정당화 콘텐츠: 센터; 정렬을 통해 중간 상자 내의 콘텐츠가 중앙에 유지됩니다.

플렉스 컨테이너를 중첩하여 여백을 개별 상자로 제한하여 여백이 다른 요소의 레이아웃에 영향을 주지 않도록 합니다. 이 방법은 측면 상자의 너비가 크게 다른 경우에도 진정한 센터링을 달성합니다.

위 내용은 동적으로 크기가 조정된 형제 요소 사이에 중간 요소를 중앙에 배치하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!