1. flex item의 방향과 순서
flex
하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성
display: flex;적용으로 시작
- flex-directrion: 플렉스 아이템의 방향을 제어
- flex-wrap:플렉스 아이템의 줄바꿈을 제어
- flex-flow: 플렉스 아이템의 방향과 줄 바꿈을 제어하는 단축 속성
- order: 플렉스 아이템의 배치순서를 제어
flex-direction
플렉스 아이템이 흐르는 방향(상하좌우)를 제어
- row(기본값) : 아이템들이 가로 방향으로 배치됨
- row-reverse: 아이템들이 역순으로 가로 배치됨
- column: 아이템들이 세로 방향으로 배치됨
- column-reverse: 아이템들이 역순으로 세로 배치됨
flex-wrap
컨테이너가 더 이상 아이템들을 한줄에 담을 여유 공간이 없을 때 아이템 줄바꿈을 어떻게 할지 결정하는 속성
- nowrap(기본값): 줄바꿈을 하지 않음 . 그냥 넘침
- wrap: 줄바꿈
- wrap-reverse: 아이템을 역순으로 줄바꿈
flex-flow
flow-direction과 flow-wrap을 한꺼번에 지정
flow-direction,flow-wrap 순으로 한 칸 떼고 씀
order
속성의 방향값을 기준으로 낮은 숫자를 먼저 배치
2. flex item의 정렬과 간격
justity-content
메인축 방향으로 아이템들을 정렬하는 속성
- flex-start(기본값): 아이템들을 시작점으로 정렬
- flex-end: 아이템들을 끝점으로 정렬
- center: 아이템들을 가운데로 정렬
- space-between: 아이템들의 사이에 균일한 간격을 줌
- space-around: 아이템들의 둘레에 균일한 간격을 만들어 줌
- space-evenly: 아이템들의 사이와 양 끝에 균일한 간격을 만들어 줌
->> IE와 엣지에서 지원되지 않음
aligne-items
수직축 방향으로 아이템들을 정렬하는 속성
- stretch(기본값): 아이템들이 수직축 방향으로 끝까지 늘어남
- flex-start: 아이템들을 시작점으로 정렬
- center: 아이템들을 가운데로 정렬
- baseline: 아이템들을 텍스트 베이스라인 기준으로 정렬
aligne-content
flex-wrap: wrap;이 설정된 상태에서, 아이템들의 행이 2줄 이상 되었을 때의 수직축 방향 정렬을 결정하는 속성
align-items의 교차 축 정렬보다 적용 우선 순위가 높음
3.flex item의 팽창과 수축
flex-basis
플랙스 아이템의 기본 크기를 설정
flex-direction이 row일때는 너비, column일 때는 높이
.flexbox{
display: flex;
flex-wrap: nowrap;
gap: 0;
padding: 10px;
background-color: #e8e8e8;
}
.item{
min-height: 150px;
flex-basis: 100px;
} 
flex-grow
Flex Container에 공간이 남을 경우 Flex Item의 flex-basis 크기가 얼마나 더 할당 가능한지 나타내는 속성
초기값(default value)은 0이고, 음수로의 설정은 불가능함
flex-shrink
flex-grow와 반대로, Flex Container에 공간이 부족해질 때 Flex Item의 axis 방향 크기가 얼마나 줄어들 수 있는지 지정하는 값
초기값(default value)은 1이고, 음수로의 설정은 불가능함
Just do it!