절대 위치 지정 없이 Flexbox에서 요소를 왼쪽과 가운데에 정렬하는 방법은 무엇입니까?

Flexbox를 사용하여 요소 왼쪽 및 가운데 정렬

문제:

하위 요소 정렬 Flexbox 컨테이너 내에서 한 요소는 중앙에, 다른 요소는 왼쪽에 정렬됩니다.

코드:

#parent {
  align-items: center;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  width: 500px;
}
#left {
  margin-right: auto;
}
#center {
  margin: auto;
}

문제:

margin-right 사용: 중앙에 있는 요소를 중앙에서 벗어나 자동으로 푸시합니다.

절대 위치 지정이 없는 솔루션:

세 번째 빈 요소 추가:

<div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right"></div>
</div>

다음 스타일을 적용합니다.

.parent {
  display: flex;
}
.left, .right {
  flex: 1;
}

설명:

왼쪽과 오른쪽이 모두 커지도록 설정되어 있습니다(flex: 1). 균등하게 분배됩니다. 사용 가능한 공간. 비어 있는 오른쪽 요소의 너비가 왼쪽과 동일하므로 가운데 요소는 완벽하게 중앙에 유지됩니다.

이 솔루션의 이점:

• 콘텐츠를 복사할 필요가 없습니다. 요소 사이.
• 콘텐츠 너비에 상관없이 요소가 완벽하게 중앙에 위치합니다.

위 내용은 절대 위치 지정 없이 Flexbox에서 요소를 왼쪽과 가운데에 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!