CSS만 사용하여 크기가 다른 측면 상자 사이에 중간 상자를 가운데에 배치하는 방법은 무엇입니까?

서로 다른 항목이 있는 가운데 중간 항목을 중앙에 유지하기

소개

폭이 다양하고 나란히 있는 상자를 포함하는 레이아웃을 디자인할 때, 도전은 중간 상자의 중심을 유지하는 것입니다. 이 기사에서는 이 효과를 달성하기 위한 CSS 솔루션을 살펴봅니다.

Flexbox를 사용하는 CSS 솔루션

측면 상자의 너비에 관계없이 가운데 상자를 중앙에 배치하기 위해 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;
}

주요 기능

• 순수 CSS: 추가 라이브러리나 JavaScript가 필요하지 않습니다.
• 절대 위치 지정 없음: Flexbox를 사용하여 요소의 위치를 ​​지정하므로 절대 위치 지정이 필요하지 않습니다.
• 동적 정렬: 측면 너비에 관계없이 가운데 상자가 중앙에 유지됩니다. 상자.

구현 세부정보

• .container는 3개의 .box 요소를 모두 래핑하는 flexbox입니다.
• 각 .box도 flexbox입니다. justify-content 사용: 내부 콘텐츠를 수평으로 정렬하려면 센터를 사용하세요.
• flex: 1을 사용하면 각 .box가 사용 가능한 공간을 균등하게 채우도록 커집니다.
• 내부 요소의 여백은 측면 상자의 가장자리가 항상 컨테이너의 가장자리에 닿도록 보장합니다.
• 자동 여백 중간 상자의 중앙 정렬을 유지하기 위해 필요에 따라 확장하거나 축소합니다.

위 내용은 CSS만 사용하여 크기가 다른 측면 상자 사이에 중간 상자를 가운데에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!