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

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

Flexbox는 컨테이너 내에서 요소를 정렬하는 강력한 방법을 제공합니다. 그러나 절대 위치 지정에 의존하지 않고 한 요소를 왼쪽에, 다른 요소를 중앙에 정렬하려고 할 때 일반적인 문제가 발생합니다.

문제

여백을 사용할 때- right: 자동으로 왼쪽 요소를 정렬하면 실수로 가운데 요소가 오른쪽으로 밀려납니다. 이는 auto 값이 적용된 요소에 남은 공간을 균등하게 분배하기 때문입니다.

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

절대 위치 지정 없이 이 문제를 피하려면, 세 번째 빈 요소를 컨테이너에 추가합니다.

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

그런 다음 다음 CSS를 적용합니다.

<code class="css">.parent {
  display: flex;
}

.left, .right {
  flex: 1;
}</code>

작동 방식

flex 속성은 성장하는 요소들 사이에 사용 가능한 공간이 어떻게 분배되는지를 결정합니다. 이 경우 왼쪽과 오른쪽이 모두 커지도록 설정되어 그 사이의 공간이 균등하게 분배됩니다. 성장하는 요소가 두 개뿐이므로 중심 요소는 항상 완벽하게 중앙에 위치합니다.

이 접근 방식의 이점

이 접근 방식은 여러 면에서 허용되는 답변보다 우수합니다. :

• 양쪽에 동일한 너비를 얻기 위해 왼쪽 콘텐츠를 오른쪽으로 복사하고 숨길 필요가 없습니다.
• 원하는 것을 달성하기 위해 Flexbox의 고유한 속성에 의존합니다. 정렬하면 더욱 우아한 솔루션이 됩니다.

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