항상 익숙하게 썼던것들은 한번더 간단하게 정리해보고, 항상 그때그때 검색하고 잊어버렸던것들도 추가해보려고 한다!
우선 아래 용어부터 짚고 넘어가자!
부모 요소 -> Flex Container(플렉스 컨테이너)
자식 요소 -> Flex Item(플렉스 아이템)
라고 칭하여 요약해보도록 하겠다
display:flex;
flex-direction
flex-wrap
flex-flow: row wrap;
flex-direction: row;
flex-wrap: wrap;
justify-content
(주축방향 정렬)align-items
align-content
flex-wrap: wrap;
이 설정된 상태에서, 여러행을 수직축 방향으로 정렬기본적으로 display:flex
가 적용된 부모 컨테이너 안에 담긴 아이템들은
- 가로 방향으로 배치되고
- 자신이 가진 내용물의 width 만큼만 차지하게 됨 (like inline element) ⭐️
- height은 부모 컨테이너의 높이만큼 늘어남 ⭐️
flex-basis
flex-direction
이 row일 때는 너비, column일 때는 높이).flex-basis
을 0으로 하면 처리가능 (기본 점유 크기를 0으로 만들어버리기)flex-grow
flex-basis
의 값보다 커질 수 있는지를 결정하는 속성flex-basis
보다 더 늘어나지 않음)flex-basis
를 제외한 여백 부분을 flex-grow
에 지정된 숫자의 비율로 나누어 가진다!!/* 1:2:1의 비율로 세팅할 경우 */
.item:nth-child(1) { flex-grow: 1; }
.item:nth-child(2) { flex-grow: 2; }
.item:nth-child(3) { flex-grow: 1; }
flex-grow
를 1:2:1 비율로 줌으로써, 나머지 여백을 1:2:1 만큼 채워서 나눠 가지게됨!!flex-shrink
flex-basis
의 값보다 줄어들 수 있는지를 결정하는 속성flex-basis
보다 더 작아질 수 있음)flex-basis
보다 작아지지 않음flex
⭐️
flex-grow
, flex-shrink
, flex-basis
를 한 번에 쓸 수 있는 축약형 속성flex: 1;
/* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
flex: 1 1 auto;
/* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
align-self
align-items
의 아이템버전, 부모가 시키는게 아니라 자기스스로 알아서 수직축방향 정렬함space-around
각 아이템들의 둘레에 균일한 간격을 만듬 (둘레 === around)
space-between
아이템들의 사이 + 양 끝에 균일한 간격을 만들어줌