오늘은 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
일 때, 자식 클래스를 좌우로 떨어뜨려 정렬하는 방법에 대해 알아보았습니다.
읽어주셔서 감사합니다 🤟
'FRONT-END > CSS' 카테고리의 다른 글
[CSS] Collapsing-Margin (마진 겹침 현상) (0) | 2022.10.06 |
---|---|
[CSS] 적용 우선 순위 (1) | 2022.09.05 |
이미지 드래그 & 오른쪽 마우스 막는 방법 (38) | 2022.07.05 |
(CSS) background-size에 hover transition animation 적용 안될때 해결방법 (3) | 2022.07.03 |
(티스토리) 블로그 하단에 원하는 버튼 기능 만드는 방법! (플로팅 버튼) (13) | 2022.03.20 |