크기가 균일하지 않은 측면 항목이 있는 Flexbox 레이아웃에서 중간 항목을 어떻게 중앙에 배치할 수 있습니까?

옆 항목 너비가 다양할 때 가운데 항목을 중앙에 배치

Flexbox 레이아웃에서는 측면 항목에 너비가 있는 경우 가운데 항목을 완벽하게 정렬하는 것이 어려울 수 있습니다. 다른 너비. 이 문제를 해결하기 위해 자동 여백이 있는 중첩된 플렉스 컨테이너를 활용할 수 있습니다.

이 접근 방식의 핵심 개념은 다음과 같습니다.

• 중첩된 플렉스 컨테이너를 사용하면 항목이 내부와 사이에 배포되도록 보장합니다.
• 왼쪽 상자와 오른쪽 상자의 내부 컨테이너에 자동 여백을 적용하면 중앙에 위치하도록 자동으로 조정됩니다. item.

이 기술을 보여주는 코드는 다음과 같습니다.

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

/* non-essential */
.box {
  align-items: center;
  height: 40px;
}

.inner {
  background: pink;
  border: 1px solid deeppink;
  padding: 0 5px;
}

p {
  text-align: center;
  margin: 5px 0 0 0;
}

이 코드에서 컨테이너는 flexbox로 설정되고 상자는 flex 비율이 다음과 같은 flex 항목입니다. 1. 각 상자는 중첩된 Flexbox를 사용하여 내용을 중앙에 배치합니다.

핵심 단계는 자동 여백을 내부로 설정하는 것입니다. 첫 번째 상자와 마지막 상자에 컨테이너가 있습니다. 왼쪽의 경우 margin-right: auto; 요소 오른쪽의 공간을 자동으로 조정하고 margin-left: auto; 왼쪽에서도 똑같이합니다. 이렇게 하면 측면 상자의 너비에 관계없이 가운데에 있는 상자가 중앙에 유지됩니다.

이 접근 방식을 사용하면 측면 항목의 너비가 다른 경우에도 가운데 항목의 진정한 중심 맞춤을 달성할 수 있습니다.

위 내용은 크기가 균일하지 않은 측면 항목이 있는 Flexbox 레이아웃에서 중간 항목을 어떻게 중앙에 배치할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!