하나의 항목을 Flexbox와 올바르게 정렬하려면 어떻게 해야 합니까?

하나의 항목을 Flexbox와 올바르게 정렬하려면 어떻게 해야 합니까?

https://jsfiddle.net/vhem8scs/

두 개의 항목을 왼쪽으로 정렬하고 하나의 항목을 플렉스 박스와 오른쪽으로 정렬할 수 있습니까?링크는 그것을 더 명확하게 보여줍니다.마지막 예는 제가 이루고 싶은 것입니다.

플렉스박스에는 코드 블록이 하나 있습니다.플로트를 사용하면 코드 블록이 네 개 있습니다.그것이 제가 플렉스박스를 선호하는 이유 중 하나입니다.

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-grow:1을 중간 flex 항목(또는 속기)에 설정하여 유사한 효과를 얻을 수 있습니다.flex:1) 마지막 항목을 오른쪽 끝까지 밀어넣습니다. (데모)

그러나 분명한 차이점은 중간 항목이 필요한 것보다 커졌다는 것입니다.플렉스 항목에 테두리를 추가하여 차이점을 확인합니다.

데모

.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 {
    margin-right: 5%;
    margin-left: 5%;
}
.headerEnd{
    margin-left: auto;
}

둘 중 하나를 할 수 있습니다.

margin-left: auto;

또는

position absolute;
right: 0px;

이렇게 하면 항목이 오른쪽으로 이동합니다.지정한 px 값은 항목을 오른쪽에서 왼쪽으로 밀어넣습니다.

제가 한 일은 다음과 같습니다(후풍을 사용했지만 CSS일 뿐입니다).

<nav class="border-b border-black flex">
  <div class="border border-red-600 w-12">Back</div>
  <div class="border border-blue-600 w-12">Logo</div>
  <div class="border border-green-600 flex-grow text-center">Socializus</div>
  <div class="border border-orange-600 w-24">
    <div class="w-12 ml-auto border border-pink-600">Menu</div>
  </div>
</nav>

이 개념은 왼쪽과 오른쪽의 두 부분이 같은 폭이고, 그러면 오른쪽의 하위 부분이 더 적은 공간을 차지한다는 것입니다.

언급URL : https://stackoverflow.com/questions/35269947/how-can-i-align-one-item-right-with-flexbox