안녕하세요! 오늘은 Flexbox를 사용해서 왼쪽과 오른쪽에 요소들을 정렬하는 방법에 대해 간단하게 공유하려고 합니다.
특히 **margin-left: auto;**나 **형제 선택자(~)**를 활용한 방법으로 정렬을 할 때 유용한 팁이 될 것입니다.
문제 상황
우리는 여러 개의 요소들이 있을 때, 특정 요소는 왼쪽에 배치하고, 다른 요소들은 오른쪽에 배치해야 하는 상황이 생깁니다. 예를 들어, 아래와 같은 HTML 구조가 있을 때:
이런 구조에서 left 클래스를 가진 요소들은 왼쪽에, right 클래스를 가진 요소들은 오른쪽에 정렬해야 하는데, 이때 Flexbox를 어떻게 활용할 수 있을까요?
해결 방법 1: margin-left: auto;와 ~ 형제 선택자 사용하기
Flexbox에서 justify-content: space-between;을 사용하면 각 요소들 사이에 공간을 균등하게 배치할 수 있습니다. 하지만 오른쪽 요소들이 모두 오른쪽 끝에 밀리도록 하기 위해서는 margin-left: auto;를 활용해야 합니다.
먼저, right 클래스가 붙은 첫 번째 요소에만 margin-left: auto;를 적용하여 오른쪽으로 밀어주고, 이후 모든 right 요소들에 대해서는 margin-left: 0;을 적용하여 밀리지 않게 만듭니다.
.item-box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
padding: 10px;
margin: 5px;
background-color: #f0f0f0;
border: 1px solid #ddd;
}
.left {
align-self: flex-start;
}
.right {
align-self: flex-end;
margin-left: auto; /* 첫 번째 right 요소만 오른쪽으로 밀기 */
}
/* .right 클래스 뒤에 오는 모든 형제 .right 요소에 대해 margin-left 0 적용 */
.right ~ .right {
margin-left: 0;
}
결과
1,2는 왼쪽에 배치되고,3,4,5는 오른쪽에 배치됩니다.
이렇게 하면 각 요소들이 원하는 위치에 정확하게 배치됩니다!
https://codepen.io/eond/pen/zxYNrQy
정리
margin-left: auto;는 Flexbox에서 남은 공간을 차지하는 역할을 하며, 이를 통해 요소들을 오른쪽으로 밀 수 있습니다.~형제 선택자는 같은 부모 요소 내에서 이후의 형제 요소들에만 스타일을 적용할 수 있어 유용합니다.
이 방법은 매우 간단하면서도 실용적이기 때문에, 배치 순서를 변경하거나 특정 요소를 밀어내고 싶을 때 매우 유용합니다.
이렇게 Flexbox를 활용하여, 원하는 배치를 쉽게 설정할 수 있습니다. 여러분도 한번 시도해보세요!