안녕하세요 질서정연 입니다.
오늘은 CSS 의 display: flex 와 align-items 에 대해 알아보겠습니다.
div 안에다가 여러 요소를 넣고 수직 정렬, 수평 정렬 하고 싶으실 때 어떻게 하시나요?
저는 어떤 원리 인지도 잘 모르면서 매번 display: flex 해 주고 justify-content: center, align-items: center 를 써 줬었어요
justify-content를 했을 때 , align-items를 했을때 어떻게 정렬이 되는지 이번 기회에 제대로 알아보자구요 ~ 😎
CSS Flexible Box Layout 은 사용자 인터페이스 디자인과 단방향 레이아웃에 최적화된 CSS모듈입니다.
플렉스 레이아웃 모델에서는 플렉스 컨테이너의 자식을 어떤 방향으로도 배치할 수 있으며, 자식의 크기도 유연하게
빈 공간을 채우거나, 컨테이너를 넘어가지 않도록 줄어듭니다.
자식 간의 수평 및 수직 정렬 또한 쉽게 조작할 수 있습니다.
정렬에 대해 알아보기 전에 알아 두어야 할 것이 있어요 !
바로 Main Axis 와 Cross Axis 입니다.
Main axis 는 flex-direction 속성으로 설정 할 수 있습니다.
기본 값은 flex-direction : row 입니다.
그래서 display : flex 를 해 주었을 때 요소들이 가로로 정렬 되는 거예요 !
The main axis
flex-direction 으로 설정 할 수 있는 정렬 방향은 네가지 값이 올 수 있습니다.
- row ( 기본 값 / 가로정렬 )
- row-reverse ( 가로 정렬 / 역순 )
- column ( 세로 정렬 )
- column-reverse ( 세로 정렬 / 역순 )
The cross axis
cross axis는 main axis 의 교차축 입니다. 수직 방향의 축이라고 생각 하시면 돼요 !예를 들어 main axis가 row라면, column 축이 cross axis가 되겠죠 !반대로 main axis가 column 이라면 cross axis는 row 가 됩니다 ~
그래서 justify-content 는?
justify-content 는 주 축 (main axis) 를 기준으로 element 사이와 주변의 공간 분배를 설정 해 줍니다. 이는 grid container의 inline axis를 기준으로 이루어 집니다.
- start
- center
- space-between
- space-around
- space-evenly
가 올 수 있습니다.
center 외의 다른 설정들은 mozilla 에서 더 좋은 예제를 보여 주고 있으니 확인 해 보세요 !
기억 해야 할 점은 justify-content 는 주 축인 main axis를 중심으로 정렬 한다는 것 입니다.
align-items
그럼 이제 이런 높이가 다른 요소를 수직 축을 기준으로 (cross axis ) 정렬하고 싶다면 어떻게 해야 할까요?
이때 사용하는게 바로 align-items 입니다 !
align-items: center 해 주면 가장 긴 높이를 가진 element를 기준으로 수직 정렬이 됩니다!
여기에다 main-axis 방향으로 수평 정렬 까지 해 주고 싶다면 ..?
justify-content: center를 추가 해 주면 되겠죠 !
제가 이 글을 쓰면서 정리를 하게 되 계기는
flex-direction: column 해 주고
align-items: center를 해 주면
수직으로 쌓인 아이템을 쉽게 가로 축 가운데로 정렬 할 수 있다는 걸 몰랐기 때문이에요 ..^^ 예제를 보실까요!
이런 아이템을 정렬하고 싶었는데요 ..
align- items : center 해 주면 수직으로 정렬 된 아이템을 쉽게 가로 가운데 정렬 해 줄 수 있어요!
쉬운 내용이지만 도움이 되셨으면 좋겠습니다!
MDN 사이트에 굉장히 정리가 잘 되어있으니 참고해서 공부 해 보세요!
Controlling Ratios of Flex Items Along the Main Axis - CSS: Cascading Style Sheets | MDN
In this guide we will be exploring the three properties that are applied to flex items, which enable us to control the size and flexibility of the items along the main axis — flex-grow, flex-shrink, and flex-basis. Fully understanding how these propertie
developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
justify-content - CSS: Cascading Style Sheets | MDN
The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.
developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
align-items - CSS: Cascading Style Sheets | MDN
The CSS align-items property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
developer.mozilla.org
그럼 다들 즐코 ! 😋
댓글