Flexbox 항목을 오른쪽 정렬하려면 어떻게 해야 합니까?-CSS 튜토리얼-php.cn

Flexbox 항목을 오른쪽 정렬하려면 어떻게 해야 합니까?

Linda Hamilton

풀어 주다： 2024-12-14 09:22:11

원래의

449명이 탐색했습니다.

How Do I Right-Align a Flexbox Item?

Flexbox에서 한 항목을 어떻게 바로 정렬할 수 있나요?

Flexbox에서는 margin-left: auto;

Flexbox 사양에는 다음과 같이 명시되어 있습니다.

"주축에서 자동 여백을 사용하는 방법 중 하나는 플렉스 항목을
고유한 '그룹'으로 분리하는 것입니다. 다음 예에서는 이를 사용하여
일반적인 UI 패턴(일부는 왼쪽에 정렬되고
다른 작업은 왼쪽에 정렬된 단일 작업 표시줄)을 재현하는 방법을 보여줍니다. 맞습니다."

업데이트된 코드 조각은 다음과 같습니다.

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

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

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

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

.result div {
  float: left;
}

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

로그인 후 복사

아래 업데이트된 바이올린은 정렬을 보여줍니다.

[fiddle 데모](https://jsfiddle.net /vhem8scs/)

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