[ flex box ]
- 행 또는 열 주축 설정을 해준다.
- 웹 요소를 배치 정렬하는 1차원 레이아웃 방식.
- display: flex;
- flex-container (부모)
ㄴ 레이아웃을 결정할 요소
- flex-item (flex-container 안에 있는 박스) (자식)
- display: flex;는 컨테이너에 사용한다.
◆ flex 축방식
- 주축 가로형
- 교차축 세로형
- 주축을 변경도 가능
방법은 다양하다. 가장 중요한 것은 기획.
코드는 내가 편한 것을 사용하면 된다.
- display: flex; >> 가로로 정렬 (기본 속성)
- box 개인의 값을 180으로 설정하여 총 너비가 300px을 넘어간다.
- 그러나 box는 display: flex;를 적용한 container의 자식.
- 즉, flex-item이므로 flex-container의 너비를 초과하여 넘어가지 않도록 너비 사이즈가 자동 계산되어 줄어든다.
- flex-item의 너비 기본값: 0, 높이 기본값: 100
block 내부 박스들은 width 최대치를 가지고
flex 내부 박스들은 height 최대치를 가짐
◆ flex-direction
- 주축의 방향성을 결정
- row (행) (기본)
- row-reverse
- column
- column-reverse
◆ flex-wrap
- item들을 강제로 한 줄에 배치할 것인지, 가능한 영역내에서 벗어나지 않게 여러 행으로 나누어 표현할 것인지를 결정
- nowrap (기본값): 공간이 부족해도 한 줄 배치
- wrap: 공간이 부족해지면 여러 행으로 배치
- wrap-reverse:
◆ flex-flow
- direction과 wrap을 한번에 사용할 수 있는 속성
◆ justify-content
- 박스들이 주축(가로) 따라 배치될 때 요소 사이의 공간 분배
- flex-start: 기본값
- flex-end: 주축의 끝점으로부터 시작점을 향해
- center: 주축의 중심
- space-between: 주축에 양끝 배치 내부간격 동일
- space-around: 박스들의 여백 동일
- space-evenly: 모든 여백 동일
- display가 flex가 아니라면 justify-content를 사용할 수 없다
+) span은 원래 너비를 적용할 수 없지만 flex-item이 되면 적용 가능하다. (쓸 일은 없다)
+) margin
상하/좌우
◆ align-items
- 교차축으로 정렬
◆ align-self
- 개별요소
- 자식에게 적용 (나머지는 부모에게 적용함)
+) gap
◆ align-content
- 교차축 정렬
- wrap일 때 정렬
◆ flex-grow
- flex-item이 기본 크기에 대해서 더 커질 수 있다.
