item 우측정렬(FlexBox)

flexbox에서 item을 우측정렬 할 수 있는 여러 방법에 대해 정리하고자 한다.
float를 사용하는 방식도 있지만, 더 이상 잘 사용하지 않음으로 여기에서는 flex를 이용한 방법에 대해 정리한다.

이 글은 daleseo님의블로그를 참고하였다.(너무 잘 정리가 되어있다!)

목표

이 글에서는, 구체적으로 아래 사진에 있는 close 버튼만 우측 정렬하는 방법에 대해 소개하고자 한다.

modal창

결론적으로 아래 사진과 같은 모습이 될 것이다.

수정한 모습

 

margin-left: auto

첫 번째 방법으로는 margin-left를 이용하는 것이다. 

아래 표는 mdn에 정리된 표를 참고했다.

즉, display값이 flex || inline-flex 인 경우, margin-left:auto를 하게 되면, 해당 엘리먼트가 속한 horizontal free space를 모두 margin-left에 부여 한다는 뜻이다. 

 

결론적으로 아래와 같은 코드로 구현 할 수 있다.

.wrapper{
	display:flex;
}

.close__btn{
	margin-left: auto;
}

 

align-self: flex-end

위와 마찬가지로 flex-item에 적용하는 속성으로, align-self를 flex-end로 줌으로써 위와같은 효과를 똑같이 낼 수 있다. 

코드는 아래와 같아 질 것이다.

.wrapper{
	display:flex;
}

.close__btn{
	align-self: flex-end
}

 

 

position: absolute

참고로, Absolute Position을 이용하는 방법도 있지만, 위의 방법이 더 깔끔하여 위의 방식으로 이용하였다. 

만약, Absolute Position을 이용하고 싶다면 아래와 같이 사용할 수 있다.

.close__btn{
	position: absolute;
    right: 10px;
    top: 10px;
}

 

 

마무리

지금도 코딩을 배운지 얼마 안된 시점이지만, 예전에 처음 코딩을 배우기 시작했을 때에는 죄다 Absolute Position 을 이용했던 것 같은데, 여러 방법이 있다는 것을 기억하고 각각의 미세한 차이?(장단점?)을 기억하고, 적재적소에 잘 사용할 수 있도록 노력해야 겠다.