마지막 플렉스 항목을 컨테이너 끝에 배치

마지막 플렉스 항목을 컨테이너 끝에 배치

---

이 질문은 flexbox를 포함하여 전체 css3를 지원하는 브라우저에 관한 것입니다.

일부 항목이 들어있는 플렉스 컨테이너가 있습니다. 그것들은 모두 flex-start로 정당화되었지만 마지막 .end 항목은 flex-end로 정당화 되기를 원합니다 . HTML을 수정하지 않고 절대 위치에 의존하지 않고이 작업을 수행 할 수있는 좋은 방법이 있습니까?

.container {
  display: flex;
  flex-direction: column;
  outline: 1px solid green;
  min-height: 400px;
  width: 100px;
  justify-content: flex-start;
}
p {
  height: 50px;
  background-color: blue;
  margin: 5px;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p class="end"></p>
</div>

---

유연한 박스 레이아웃 모듈-8.1. 자동 여백에 맞추기

플렉스 항목의 자동 여백은 블록 흐름의 자동 여백과 매우 유사한 효과가 있습니다.

• 가변베이스 및 가변 길이를 계산하는 동안 자동 여백은 0으로 처리됩니다.

• 를 통해 정렬하기 이전 justify-content하고 align-self, 양의 여유 공간은 해당 차원에서 자동 마진에 배포됩니다.

따라서 margin-top: auto다른 요소와 마지막 요소 사이에 공간을 분배하는 데 사용할 수 있습니다 . 그러면 요소가 맨 아래에 배치됩니다.

.end {
  margin-top: auto;
}

클래스 사용을 피하고 :last-of-type/ last-childpseudo 클래스를 활용할 수도 있습니다 .

p:last-of-type {
  margin-top: auto;
}

.container {
  display: flex;
  flex-direction: column;
  outline: 1px solid green;
  min-height: 400px;
  width: 100px;
  justify-content: flex-start;
}
p {
  height: 50px;
  background-color: blue;
  margin: 5px;
}
.end {
  margin-top: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p class="end"></p>
</div>

---

이 flexbox 원칙은 수평으로도 작동합니다.

flex base와 flexible length를 계산하는 동안 자동 여백은 0으로 처리됩니다.
justify-content 및 align-self를 통해 정렬하기 전에 양의 여유 공간이 해당 차원의 자동 여백에 배포됩니다.

마지막 항목에 대한 자동 왼쪽 여백을 설정하면 작업이 수행됩니다.

.last-item {
  margin-left: auto;
}

코드 예 :

.container {
  display: flex;
  width: 400px;
  outline: 1px solid black;
}

p {
  height: 50px;
  width: 50px;
  margin: 5px;
  background-color: blue;
}

.last-item {
  margin-left: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p class="last-item"></p>
</div>

Codepen 스 니펫

이것은 데스크탑 바닥 글에 매우 유용 할 수 있습니다.

Envato 가 회사 로고로 여기에서 한 것처럼 .

Codepen 스 니펫

참고URL : https://stackoverflow.com/questions/33924655/position-last-flex-item-at-the-end-of-container