flex

• 컨테이너에 flex를 지정해준다 ⇒ flex container

• 그의 자식 요소들 ⇒ flex items

• flex 기술들 중에 부모에 쓸 수 있는 것과 자식 요소에 쓸 수 있는 것이 구분되어 있음

• display: flex
• 컨테이너의 기본 크기 : (auto) 넓이는 최대, 높이는 자식 만큼
• 자식들의 기본 크기 : (auto) 넓이는 본인의 크기 만큼, 높이는 컨테이너 크기 만큼 ⇒ flex-direction이 바뀌면 둘이 반대
• width, height 지정하면 이 값이 우선 됨

• display: inline-flex
• 컨테이너 크기는 항상 본인 만큼(=자식들 크기)이고 컨테이너끼리 글자처럼 배치됨 ⇒ inline 속성
• 자식 배치 ⇒ flex 속성
 

• https://flexboxfroggy.com/#ko 에서 게임으로 연습할 수 있음

Flex conatiner에 쓸 수 있는 속성들

• display: flex, inline-flex가 된 컨테이너!!

• flex-direction : 자식들이 정렬되는 방향(=주축) 지정
• row, column :
• 정렬되는 가로/세로 방향을 정할 수 있음(기본 값은 row)
• 따라서 기본은 flex를 따라 [자식 넓이:자식 본인만큼], [자식 높이: 컨테이너 만큼(젤큰자식)]인데
column은 반대로 [자식 넓이:컨테이너 만큼(=꽉참)], [자식 높이: 자식 본인만큼] == float
• 주축(main-axis)↔ 교차축(cross-axis)
• -reverse : 컨테이너를 주축 방향으로 반전
• 시작점(flex-start)과 끝점(flex-end)이 반대가 되고, 자식 요소의 배치 순서도 반대가 됨

• flex-wrap : 줄바꿈
• nowrap : (기본값)자식 크기가 컨테이너에 넘치면 줄바꿈 되지 않고 shrink되어 컨테이너 안에 있음
• flex-shrink에 따라 자식 아이템들의 넓이가 원래보다 줄어듦
• wrap : 자식 크기가 컨테이너에 넘치면 넘치면 줄바꿈 됨
• wrap-reverse : 줄바꿈 방향이 반대로, 즉 위로 줄바꿈 됨

• justify-content: 자식들을 컨테이너 주축 상 어디에 배치 or 자식 요소의 여백을 지정
• flex-start : 주축 시작부분에 배치
• flex-end: 주축 끝 부분에 배치
• center: 주축 가운데에 배치
• space-between: 첫 자식 요소를 시작점, 마지막 요소를 끝점에 두고 나머지는 똑같은 여백을 두어 배치
• space-around: 자식 요소들 사이에 똑같은 여백을 둠
• 첫 요소의 시작과 마지막 요소의 끝에도 여백이 있음에 주의
• space-evenly: 양끝 여백의 사이즈가 요소간 여백과 사이즈가 같음
• cf. space-around: 자식 요소 왼/오에 모두 여백이 있어서 양끝쪽 여백이 더 작음
• stretch: [기본값] 자식들의 넓이가 최대한 늘어남, 주축 시작에 배치 (==normal)

• align-items: 자식들을 컨테이너 교차축상 어디에 배치할 것인가
• stretch : [기본 값] 교차축의 시작과 끝 사이를 가득 채움
• flex-start: 교차축 시작 부분에 위치(최대한으로 줄어듦)
• flex-end: 교차축 끝 부분에 배치( “ )
• center: 교차축 가운데에 배치
• baseline: 자식 요소들의 텍스트가 끝나는 부분이 맞춰짐
⇒ 만약 여러 줄이면, 한줄 당 한칸이 컨테이너라고 생각하고 각 칸 어디에 배치할 것인가를 결정

• align-content: (아이템이 두줄 이상일 때 사용 가능)교차축 상 어디에 배치 or 자식 요소의 여백을 지정
• flex-start: 여백x, 여러 줄들을 교차축 시작에 정렬
• flex-end: 여백x, 여러 줄들을 교차축 끝에 정렬
• center: 여백x, 여러 줄들을 교차축 가운데에 정렬
• stretch: [기본값]남은 여백을 n등분함, 교차축 시작에 정렬 (==normal)
• space-between: 여러 줄들 사이에 동일한 간격을 둠
• space-around: 여러 줄들 주위에 동일한 간격을 둠
• space-evenly: 양끝 여백의 사이즈가 요소간 여백과 사이즈가 같음
• cf. space-around: 자식 요소 왼/오에 모두 여백이 있어서 양끝쪽 여백이 더 작음

• flex-flow : flex-direction + align-content

• gap
• 자식 아이템 사이의 여백을 지정
• 최신 기술이라 하위 호환성 문제가 있음(flex items에 margin 요소로 대체하자)

flex items에 쓸 수 있는 속성들

• flex-shrink
• 컨테이너가 wrap일 때, 감소 비율
• 기본 값은 1
• 0을 주면 줄어들지 않고 아이템의 기본 크기를 유지한다
• 줄여지는 비율을 정확하게 계산하는 것은 까다롭고 이를 필요한 부분은 거의 없음
⇒ 따라서 flex-shrink의 값이 0이냐 1이냐 정도의 차이만 알고 있으면 됨!!!

• flex-grow
• flex의 증가 비율
• 기본 값은 0 (그래서 늘어나지 않고 아이템의 기본 크기를 유지)

• flex-basis
• 아이템의 (주축 방향의) 크기를 지정 한다
• 값이 auto ⇒ [기본 값] 아이템의 기본 크기(width, height)를 따름
• 값이 auto가 아닌 값(px) ⇒ flex-basis 값이 우선
• flex-grow가 있으면 flex-grow가 우선

• flex
• = flex-grow + flex-shrink + flex-basis
• 순서대로 값을 띄어쓰기로 구분해 주면 됨 (기본값은 0 1 auto)
• flex-shrink가 생략되면 기본 값인 1, flex-basis가 생략 되면 0
 

• order
• 순서의 index를 명시
• 기본 값은 0
• +값을 줄 수록 순서가 주축 방향에서 뒤로, - 값을 주면 앞으로

• align-self
• 컨테이너의 align-items 값을 item마다 지정 가능하고 이 값이 align-items보다 우선된다
• 쓸 수 있는 값은 align-items 값과 동일하다
• 기본 값은 auto : 컨테이너의 align-items 값을 따름