궁금한 내용을 검색해보세요!
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
서근 개발노트
티스토리에 팔로잉
FRONT-END/CSS

(CSS) display: flex에 여러 요소가 있을때 좌우 정렬 하는 방법

서근
QUOTE THE DAY

-
Written by SeogunSEOGUN

반응형

오늘은 HTML의 부모 클래스가 display: flex일 때, 자식 클래스를 좌우로 떨어뜨려 정렬하고 싶을 때 어떻게 하는지 알아보도록 하겠습니다.

display flex 좌우 정렬 방법

우선, 부모 클래스가 display: flex이고 justify-content: flex-start로 우측에 정렬되어있다고 가정해보겠습니다.

See the Pen Untitled by 서근 (@seogun95) on CodePen.

그럼 위와같이  이미지가 우측으로 딱 달라붙어 정렬되게 됩니다.

 

이때, left-img 요소를 좌측으로 정렬하려면 .left-imgmargin-right: auto; 만 넣어주게 되면 완벽하게 좌측으로 붙는 것을 확인할 수 있습니다.

 

마진을 오른쪽에 줘서 왼쪽으로 붙게 하는 방식이라고 생각하시면 됩니다.

left-img 좌측 정렬

See the Pen Untitled by 서근 (@seogun95) on CodePen.

display: flex에 여러 가지 자식 클래스가 있으면 어떻게 할까요?

 

middle-img 클래스를 먼저 추가해주고 위치를 정해보도록 하죠.

middle-img 우측 정렬

middle-imgmargin-leftauto로 넣어주면 됩니다.

See the Pen Untitled by 서근 (@seogun95) on CodePen.

right-img 우측 정렬

right-imgmargin-leftauto로 넣어주면 됩니다.

See the Pen Untitled by 서근 (@seogun95) on CodePen.

2가지 요소씩 좌우 배치

left-img1, left-img2  |  right-img1, right-img2가 각각 존재할 때, 가운데를 기준으로 좌우로 정렬할 수 도 있습니다.

 

이럴 때는 right-img1margin-leftauto로 지정해주시기만 하면 됩니다.

See the Pen Untitled by 서근 (@seogun95) on CodePen.

더 다양하게 나누기

더 다양한 방법에 대해 궁금하시다면 아래 이미지를 참고해보시면 될 것 같습니다.


오늘은 이렇게 HTML의 부모 클래스가 display: flex일 때, 자식 클래스를 좌우로 떨어뜨려 정렬하는 방법에 대해 알아보았습니다.

 

읽어주셔서 감사합니다 🤟

 

 


잘못된 내용이 있으면 언제든 피드백 부탁드립니다.


서근


위처럼 이미지 와 함께 댓글을 작성할 수 있습니다.