Flexbox 컨테이너의 단일 항목을 오른쪽 정렬하는 방법은 무엇입니까?

Flexbox를 사용하여 한 항목을 올바르게 정렬하는 방법

정확한 항목 정렬을 달성하는 것은 웹 디자인에서 일반적인 과제입니다. Flexbox는 강력한 솔루션을 제공하지만 특정 구성에서 항목을 정렬하는 것은 까다로울 수 있습니다. 이 문서에서는 하나의 항목을 다른 플렉스 항목 사이에 바로 정렬해야 하는 일반적인 시나리오를 살펴봅니다.

문제 설명

세 개의 하위 항목이 정렬된 플렉스 컨테이너를 생각해 보세요. 나란히. 원하는 결과는 처음 두 항목을 왼쪽에 정렬하고 세 번째 항목을 오른쪽에 정렬하는 것입니다. 다음 HTML과 CSS는 초기 설정을 나타냅니다.

<div class="wrap">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

.wrap {
  display: flex;
  justify-content: space-between;
}

해결책: Margin-Left Auto

Flexbox는 이 문제에 대한 간단한 해결책을 제공합니다. : margin-left 설정: 마지막 하위 항목에 자동. flex 사양에서:

주축에서 자동 여백을 사용하는 방법 중 하나는 flex 항목을 별개의 "그룹"으로 분리하는 것입니다. 이는 단일 작업 막대의 일반적인 UI 패턴으로 예시되며, 그 중 일부는 왼쪽에 정렬되고 다른 일부는 오른쪽에 정렬됩니다.

마지막에 margin-left: auto 적용 예제의 하위 항목은 원하는 정렬을 가져옵니다.

.wrap div:last-child {
  margin-left: auto;
}

업데이트됨 예

이 수정된 CSS를 사용하면 결과 HTML 및 CSS 코드 조각이 Flex 컨테이너 내에서 처음 두 항목은 왼쪽으로 정렬되고 세 번째 항목은 오른쪽으로 정렬되어 원하는 정렬을 생성합니다.

<div class="wrap">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

.wrap {
  display: flex;
  justify-content: space-between;
}
.wrap div:last-child {
  margin-left: auto;
}

위 내용은 Flexbox 컨테이너의 단일 항목을 오른쪽 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!