안녕하세요! 오늘은 Flexbox를 사용해서 왼쪽과 오른쪽에 요소들을 정렬하는 방법에 대해 간단하게 공유하려고 합니다.

특히 **margin-left: auto;**나 **형제 선택자(~)**를 활용한 방법으로 정렬을 할 때 유용한 팁이 될 것입니다.

문제 상황

우리는 여러 개의 요소들이 있을 때, 특정 요소는 왼쪽에 배치하고, 다른 요소들은 오른쪽에 배치해야 하는 상황이 생깁니다. 예를 들어, 아래와 같은 HTML 구조가 있을 때:

<div class="item-box">

  <div class="item left">1</div>

  <div class="item left">2</div>

  <div class="item right">3</div>

  <div class="item right">4</div>

  <div class="item right">5</div>

</div>

이런 구조에서 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

정리

1. margin-left: auto;는 Flexbox에서 남은 공간을 차지하는 역할을 하며, 이를 통해 요소들을 오른쪽으로 밀 수 있습니다.
2. ~ 형제 선택자는 같은 부모 요소 내에서 이후의 형제 요소들에만 스타일을 적용할 수 있어 유용합니다.

이 방법은 매우 간단하면서도 실용적이기 때문에, 배치 순서를 변경하거나 특정 요소를 밀어내고 싶을 때 매우 유용합니다.

이렇게 Flexbox를 활용하여, 원하는 배치를 쉽게 설정할 수 있습니다. 여러분도 한번 시도해보세요!