용기 끝에 마지막 플렉스 항목 배치

용기 끝에 마지막 플렉스 항목 배치

이 질문은 플렉스박스를 포함한 완전한 CSS3 지원 브라우저에 관한 것입니다.

저는 안에 몇 가지 물건이 들어 있는 플렉스 용기를 가지고 있습니다.그들은 모두 유연하게 시작하는 것이 정당하지만 나는 마지막을 원합니다. .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다른 요소와 마지막 요소 사이의 공간을 분배합니다.

그러면 마지막 요소가 맨 아래에 배치됩니다.

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

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid #000;
  min-height: 200px;
  width: 100px;
}
p {
  height: 30px;
  background-color: blue;
  margin: 5px;
}
p:last-of-type {
  margin-top: auto;
}

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

---

마찬가지로 다음을 사용할 수도 있습니다.margin-left: auto또는margin-right: auto수평으로 동일하게 정렬할 수 있습니다.

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

.container {
  display: flex;
  width: 100%;
  border: 1px solid #000;
}
p {
  height: 50px;
  width: 50px;
  background-color: blue;
  margin: 5px;
}
p:last-of-type {
  margin-left: auto;
}

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

이 플렉스박스 원리는 수평적으로도 작동합니다.

플렉스 베이스와 유연한 길이를 계산하는 동안 자동 여백은 0으로 처리됩니다.
콘텐츠 정당화 및 자체 정렬을 통해 정렬하기 전에 모든 양의 여유 공간이 해당 차원의 자동 여백에 분산됩니다.

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

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

코데펜 스니펫

이 기능은 데스크톱 바닥글 사용자에게 매우 유용합니다.

엔바토가 여기 회사 로고와 함께 했던 것처럼.

코데펜 스니펫

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