티스토리 뷰
FlexBox는 CSS3에서 제공하는 레이아웃을 지정할 수 있는 방식 중 하나이다.
FlexBox를 사용할 때는 두 단계의 태그가 필요하다. 첫 번째는 부모 태그이고 두 번째는 자식 태그이다. 부모 태그는 자식 태그를 감싸는 태그로 자식 태그를 배치하고 정렬 시킬 수 있고 컨테이너라고 부르기도 하며 부모 태그 안에 있는 모든 태그는 자동으로 자식 태그가 되며 아이템이라고 부르기도 한다.
FlexBox는 main-axis와 cross-axis라는 두개의 축을 가지고 있으며 FlexBox에 기본적으로 main-axis는 가로이고 cross-axis는 세로이다. 각 축은 시작 점과 끝 점을 가지고 있는데 main-axis의 시작 점과 끝 점은 아이템이 배치되는 방향이고 cross-axis의 시작 점과 끝점은 각 아이템이 채워지는 정도이다. 기본적으로 각 시작 점은 위와 왼 쪽이고 끝점은 아래와 오른 쪽이다.
아래는 각 태그에 사용되는 속성과 속성의 설명이다.
- 부모 태그의 속성
flex-direction |
축과 축의 시작 점, 끝 점을 변경할 수 있다. |
flex-wrap |
아이템을 배치하는데 브라우저의 크기를 넘어 서는 아이템이 있을 때 하나의 줄을 생성하여 아이템을 배치한다. |
flex-flow |
flex-direction과 flex-wrap 속성의 약식 속성이다. |
justify-content |
main-axis를 따라서 아이템을 정렬한다. |
align-items |
cross-axis를 따라서 아이템을 정렬한다. |
align-content |
cross-axis에 여러 줄이 있을 때 각 줄을 정렬한다. |
- 자식 태그의 속성
order |
원하는데로 아이템을 정렬할 수 있다. |
flex-grow |
원하는데로 아이템의 크기를 변경할 수 있다. |
flex-shrink |
아이템의 크기가 자동으로 줄어드는 정도를 나타낸다. |
flex-basis |
main-axis 방향으로 크기를 정한다. |
flex |
flex-grow, flex-shrink 및 flex-basis 속성의 약식 속성이다. |
align-self |
align-items와 동일하게 움직인다. |
글만 읽어서는 이해하기 어려우니 FlexBox가 어떻게 동작하는지 직접 눈으로 확인하는 것을 추천한다.
FlexBox의 동작 방식은 https://www.w3schools.com/css/css3_flexbox.asp에서 볼 수 있다.
참고
https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
https://www.w3schools.com/css/css3_flexbox.asp#align-content
'web > css' 카테고리의 다른 글
| [CSS + Chrome] font size 최소 크기 & 우회하기 (0) | 2022.02.27 |
|---|---|
| [CSS] font size 속성 비교(px, em, rem, pt, %, vw, vh, 속성 값) (0) | 2022.02.26 |
| [CSS] Element가 position: fixed로 고정되지 않는 문제 (0) | 2019.09.26 |
| Sass(Syntactically Awesome Stylesheets) (0) | 2018.01.13 |
| CSS(Cascading Style Sheets) 기초 (0) | 2017.12.29 |