`위치: 절대`를 사용하지 않고 Flex 항목을 오른쪽 정렬하려면 어떻게 해야 합니까?

Flexbox를 사용하여 Flex 항목 오른쪽 정렬

Flexbox로 작업할 때 위치를 사용하지 않고 항목을 오른쪽 정렬: 절대값은 다음을 사용하여 달성할 수 있습니다. 약간의 Flexbox 기교. 이 시나리오에는 세 개의 div가 포함된 div가 있으며 "연락처"를 오른쪽 정렬해야 합니다.

원래 접근 방식: 절대 위치 사용

처음에는 "연락처" div는 절대적으로 배치되었으며 right: 0을 사용하여 컨테이너의 오른쪽 가장자리에 배치되었습니다. 재산. 이 방법은 효과가 있지만 레이아웃 유연성을 강조하는 Flexbox의 정신에 어긋납니다.

더욱 Flexbox 중심 솔루션: 자동 왼쪽 여백

더욱 Flexbox- 규정을 준수하는 접근 방식에는 자동 왼쪽 여백을 사용하는 것이 포함됩니다. 블록 서식 컨텍스트와 달리 플렉스 항목은 자동 여백을 다르게 처리하여 정확한 정렬이 가능합니다. "연락처" div의 margin-left 속성을 자동으로 설정하면 브라우저가 자동으로 여백을 조정하여 항목을 컨테이너의 오른쪽 가장자리로 밀어냅니다.

코드 조각:

.c {
  margin-left: auto;
}

업데이트된 Fiddle:

[Flexbox 여백-왼쪽 정렬 데모](https://jsfiddle.net/vqDK9/1/)

이 방법은 Flexbox 원칙을 준수하고 레이아웃의 유연성을 유지하면서 적절한 오른쪽 정렬을 보장합니다.

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