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

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

display flex 좌우 정렬 방법

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

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

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

 

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

 

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

left-img 좌측 정렬

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

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

 

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

middle-img 우측 정렬

middle-img의 margin-left를 auto로 넣어주면 됩니다.

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

right-img 우측 정렬

right-img의 margin-left를 auto로 넣어주면 됩니다.

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

2가지 요소씩 좌우 배치

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

 

이럴 때는 right-img1의 margin-left를 auto로 지정해주시기만 하면 됩니다.

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

더 다양하게 나누기

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

---

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

 

읽어주셔서 감사합니다 🤟