[TIL] flexbox 에서 div 한 개만 우측 정렬하기

아래와 같이 하면 됨.

<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item-gnb"></div>
</div>

.flex-container {
  display: flex;
}

.flex-item {
  flex: none;
  /* flex: 0 0 auto */    
}

.flex-item-gnb {
  margin-left: auto;
}

또 다른 방법으로는 왼쪽에 할 것들을 div 로 한 번 더 싸는 방법

<div class="wrap">
  <div>
    <span>One</span>
    <span>Two</span>
  </div>
  <div>Three</div>
</div>

.wrap {
  display: flex;
  background: #ccc;
  justify-content: space-between;
}

참고:
https://stackoverflow.com/questions/35269947/how-can-i-align-one-item-right-with-flexbox
https://d2.naver.com/helloworld/8540176