CSS 하나의 항목을 flexbox와 바로 정렬

https://jsfiddle.net/vhem8scs/

flexbox와 두 개의 항목을 왼쪽으로 정렬하고 하나의 항목을 오른쪽으로 정렬 할 수 있습니까? 링크가 더 명확하게 보여줍니다. 마지막 예는 내가 달성하고자하는 것입니다.

flexbox에는 하나의 코드 블록이 있습니다. float을 사용하면 네 개의 코드 블록이 있습니다. 이것이 내가 flexbox를 선호하는 이유 중 하나입니다.

HTML

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

<!-- DESIRED RESULT -->

<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;
}

하나의 플렉스 자식을 오른쪽에 맞추려면margin-left: auto;

로부터 플렉스 사양 :

주축에서 자동 여백을 사용하는 것은 플렉스 항목을 별개의 "그룹"으로 분리하는 것입니다. 다음 예제에서는이를 사용하여 공통 UI 패턴 (일부는 왼쪽에 정렬되고 일부는 오른쪽에 정렬 됨)을 재현하는 방법을 보여줍니다.

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

바이올린 업데이트

.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;
}

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

<!-- DESIRED RESULT -->
<div class="result">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

노트 :

중간 항목 (또는 속기 flex:1) 에서 flex-grow : 1을 설정 하여 마지막 항목을 오른쪽으로 끝까지 밀면 비슷한 효과를 얻을 수 있습니다. ( 데모 )

그러나 분명한 차이점은 중간 항목이 필요 이상으로 커진다는 것입니다. 차이점을 보려면 flex 항목에 테두리를 추가하십시오.

데모

.wrap {
  display: flex;
  background: #ccc;
  width: 100%;
  justify-content: space-between;
}
.wrap div {
  border: 3px solid tomato;
}
.margin div:last-child {
  margin-left: auto;
}
.grow div:nth-child(2) {
  flex: 1;
}
.result {
  background: #ccc;
  margin-top: 20px;
}
.result:after {
  content: '';
  display: table;
  clear: both;
}
.result div {
  float: left;
}
.result div:last-child {
  float: right;
}

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

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

<!-- DESIRED RESULT -->
<div class="result">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

간결하고 순수한 flexbox 옵션의 경우 왼쪽 정렬 항목과 오른쪽 정렬 항목을 그룹화하십시오.

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

그리고 사용 space-between:

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

이 방법으로 여러 항목을 오른쪽 (또는 하나)으로 그룹화 할 수 있습니다.

https://jsfiddle.net/c9mkewwv/3/

중앙의 일부 요소 (headerElement)와 오른쪽의 마지막 요소 (headerEnd)를 정렬합니다.

.headerElement {
    margin-right: 5%;
    margin-left: 5%;
}
.headerEnd{
    margin-left: auto;
}