flex 속성
display: flex; = 자식요소들의 정렬
flex-direction: row; 기본방향 좌우
flex-direction: row-reverse; 반전
flex-direction: column; 세로 = align-items, justify-content도 바뀐다
align-items: 상하
align-items: flex-end; 맨끝
align-items: center; 중앙
justify-content: 좌우
justify-content: flex-end; 맨끝
justify-content: center; 중앙
justify-content: space-between; 공백을 똑같이 분배 끝부분 0
justify-content: space-around; 등분하여 분배
justify-content: space-evenly; 공백을 똑같이 분배 끝부분도 똑같이 분배
특정 요소에 우선순위 부여
order: 0 기본값
order: 1 뒤
order: -1 앞
flex라는 코드는 기본 1줄로 정렬된다.
flex-wrap: no-wrap; 기본값, 한줄 정렬
flex-wrap: wrap; 여러줄 정렬
flex-wrap: wrap-reverse; 여러줄 반전 정렬
flex-wrap: wrap; 인 경우 align-content로 정렬 가능
align-content: stretch; 기본값
align-content: flex-end; 맨 아래
align-content: flex-start; 맨 위
align-content: center; 중앙
align-content: space-between; 두 줄 이상 간격을 동일하게 조정
align-content: space-around; 두 줄 이상 간격을 동일하게 조절 / 양 끝은 다름
1. flex-grow
남은 공간을 얼마나 많이 차지할지 비율 결정
`flex-grow: 1`이라면, 다른 아이템들과 함께 남는 공간을 나누어 갖는다.
여러 아이템이 있을 때, `flex-grow` 값이 큰 아이템이 더 많은 공간을 가진다.
2. flex-shrink
공간이 부족할 때 아이템이 얼마나 줄어들지를 정한다.
`flex-shrink: 0`이면 그 아이템은 작아지지 않는다.
3. flex-basis
아이템의 기본 크기를 정한다.
기본값 (w/h)로 표현 가능하다.
`flex-basis: 200px`이면 그 아이템은 200px의 기본값을 가진다.
다른 넓이값을 주는 것 보다 flex-basis가 가장 높은 순위를 가진다.
4. flex: grow shrink basis;
flex: 1 = flex: 1 0 0과 같다
5. gap
사이간격 조정
flex가 있어야 사용가능