Flexbox를 사용하여 단일 요소를 오른쪽으로 정렬하는 방법은 무엇입니까?

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

Flexbox 레이아웃 내에서 한 요소를 바로 정렬하는 문제를 해결하기 위해 제공된 HTML 및 CSS 코드 두 개의 항목을 왼쪽에, 하나의 항목을 오른쪽에 배치하는 기본 Flexbox 설정을 보여줍니다. 컨테이너.

HTML

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

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

CSS

.wrap {
  display: flex;
  background: #ccc;
  width: 100%;
  justify-content: space-between;
}

.result {
  background: #ccc;
  margin-top: 20px;
}

.result:after {
  content: '';
  display: table;
  clear: both;
}

.result div {
  float: left;
}

.result div:last-child {
  float: right;
}

Flexbox 접근 방식

하나의 하위 요소를 올바르게 정렬하려면 다음과 같이 설정하세요. 여백 왼쪽: 자동;. 이는 플렉스 항목을 별개의 그룹으로 분리하는 데 유용한 주축의 자동 여백 속성을 활용합니다.

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

업데이트된 Fiddle

업데이트된 JSFiddle이 이를 보여줍니다. 효과적으로 접근하세요:

[업데이트됨 Fiddle](https://jsfiddle.net/vhem8scs/)

업데이트된 CSS에서 margin-left: auto; 속성이 .wrap 컨테이너 내의 마지막 div 요소에 적용되어 오른쪽으로 정렬됩니다.

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