[CSS] 좌측 정렬에서 마지막만 우측 정렬하는 법

 

div 내에서 정렬이 필요할 때, 보통 flex 를 이용해 정렬하곤 한다. 하지만 일부는 좌측 정렬, 일부는 우측 정렬이 필요할 때가 있다면? 위 내가 작업한 페이지에서 음악 리스트는 이미지와 설명은 왼쪽에, 생략 아이콘은 오른쪽에 붙어있는 것처럼.

 

코드 리뷰

<article class="playlist__items">
  <div class="items__cover"><img src="images/cd_img02.jpg" alt=""></div>
  <div class="items__desc">
      <h5 class="desc__artist">Muse</h5>
      <h3 class="desc__music">Plug In Baby</h3>
  </div>
  <i class="fa-solid fa-ellipsis-vertical fa-lg items__more"></i>
</article>

.playlist__items {
    padding: 15px;
    border-radius: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

그냥 flex-start만 준 모습

처음엔 단순히 flex 를 이용해 좌측 정렬을 한 뒤 items__desc 부분 width에 고정값을 줄까 생각했었다. 하지만 요즘처럼 다양한 디바이스가 나오는 세상에 고정값은 있을 수 없는 일이다. 이럴 땐 우측 정렬하고 싶은 곳에 딱 마법의 한줄만 추가해주면 된다. 

.items__more {margin-left: auto;}

쨘(...) 너무 간단하고 쉬워서 말이 나오지 않았다.

출처는 https://medium.com/@iamryanyu/how-to-align-last-flex-item-to-right-73512e4e5912
본문에서도 마법이라고 표현하고 있다. 어떤 이유인진 잘 모르겠지만 많은 퍼블리셔들을 구원할 한 줄이라는 것은 변함이 없는 듯.