이 질문은 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다른 요소와 마지막 요소 사이에 공간을 분배하는 데 사용할 수 있습니다 .
그러면 마지막 요소가 맨 아래에 배치됩니다.
p:last-of-type {
margin-top: auto;
}
마찬가지로, 당신은 또한 사용할 수 있습니다 margin-left: auto또는 margin-right: auto수평으로 같은 정렬.
p:last-of-type {
margin-left: auto;
}
답변
이 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>이것은 데스크탑 바닥 글에 매우 유용 할 수 있습니다.
Envato 가 회사 로고로 여기에서 한 것처럼 .
