하나의 Flexbox 항목을 오른쪽 정렬하고 다른 항목은 왼쪽 정렬을 유지하려면 어떻게 해야 합니까?

Flexbox 항목 정렬: 오른쪽 정렬 옵션

질문:

Flexbox의 맥락에서 다음이 가능합니까? 두 항목을 왼쪽으로 정렬하고 하나의 항목을 오른쪽으로 정렬하시겠습니까? 시각적 표현을 보려면 제공된 JSFiddle 링크를 참조하세요.

답변:

하나의 Flex 하위 항목에 대해 오른쪽 정렬을 달성하려면 해당 margin-left: auto;를 설정하세요.

flex 사양에 따라:

주축의 자동 여백을 사용할 수 있습니다. 플렉스 아이템을 다른 "그룹"으로 분리합니다. 이를 통해 일부 항목은 왼쪽으로 정렬되고 다른 항목은 오른쪽으로 정렬된 작업 표시줄과 같은 UI 패턴을 생성할 수 있습니다.

따라서 다음 CSS는 제공된 예의 마지막 div 요소를 오른쪽으로 정렬합니다.

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

이 기술을 기존 Flexbox 스타일과 결합하면 여러 코드 블록 없이도 원하는 레이아웃을 얻을 수 있습니다.

위 내용은 하나의 Flexbox 항목을 오른쪽 정렬하고 다른 항목은 왼쪽 정렬을 유지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!