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

Flexbox를 사용하여 왼쪽과 가운데 정렬: 절대 위치 지정이 없는 솔루션

Flexbox를 사용하여 하위 요소를 정렬하는 경우 정렬이 어려울 수 있습니다. 절대 위치 지정을 사용하지 않고 한 요소를 왼쪽에 배치하고 다른 요소를 중앙에 배치합니다. 추가 빈 요소를 사용하는 솔루션은 다음과 같습니다.

HTML:

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

/* Styles for demonstration */
.parent {
  padding: 5px;
  border: 2px solid #000;
}

.left,
.right {
  padding: 3px;
  border: 2px solid red;
}

.center {
  margin: 0 3px;
  padding: 3px;
  border: 2px solid blue;
}</code>

설명:

1. 왼쪽 및 오른쪽 요소는 flex: 1로 설정되어 사용 가능한 공간을 균등하게 분배하도록 확장됩니다.
2. 빈 오른쪽 요소 왼쪽 요소가 중앙 요소를 중앙에서 밀어내지 않도록 보장합니다.

이 접근 방식은 절대 위치 지정이나 왼쪽 콘텐츠를 오른쪽에 복제할 필요 없이 일관되고 중앙 정렬을 생성합니다.

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