flexbox란?
- 레이아웃을 좀 더 유연하게 구성할 수 있게 해주는 1차원 개념의 레이아웃 모델
flexbox 용어 정리
- flex container : item들을 감싸고 있는 부모
- flex item : 컨테이너 내부에 정렬을 위해 담아놓은 요소들
- main axis : 주축 - 왼 -> 오 방향 가로축
- cross axis : 교차축 - 위 -> 아래 방향 세로축
container 내부 속성
display
- display-outside : inline, block, inline-block처럼 앞뒤 요소와의 관계를 정의
- display-inside : 내부에 있는 item들의 유형을 정의
- 두가지를 동시에 사용하여 외부 내부 둘다 정의 가능 ex) inline-flex
flex-direction
- 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향을 지정하는 속성
- 주축의 위치, 주축의 방향 지정
- 기본값 : row 왼 -> 오 주축
- row-reverse : 오 -> 왼 주축
- culumn : 위 -> 아래 주축
- culumn-reverse : 아래 -> 위 주축
flex-wrap
- 내부 item을 강제로 한 줄 or 여러행으로 나누어 표현할 것인지 설정하는 속성
- 기본값 : nowrap 강제로 한 줄 배치
- wrap : item 들이 자신의 기존 크기를 지키면서 여러행으로 나누어 배치
- wrap-reverse : 시작점을 역방향으로 바꾸어 배치
flex-flow
- flex-flow : direction wrap으로 두가지를 한번에 정의하는 속성
justify-content
- justify-content : flex-start 주축 시작점에서 정렬
- justify-content : flex-end 주축 끝점에서 정렬
- justify-content : center 주축 가운데 정렬
- justify-content : space-between 시작, 끝 item이 끝으로 붙고 공백 공간을 균일하게 나누어 가짐
- justify-content : space-around item의 앞뒤로 동일한 공백 공간을 가지게 됨
- flex-direction 의 주축을 알고 사용해야 정확히 사용 가능
align-items
- 교차축의 위치를 선정해 item 묶음 한 줄!!!!의 위치를 지정
- 기본값 stretch 가질 수 있는 모든 높이를 가짐
- flex-start : 교차축의 시작점에 위치
- flex-end : 교차축의 끝지점에 위치
- center : 높이의 중간에 위치
align-content
- 여러 줄의 교차축 관련 정렬 속성
- align-content : flex-start 교차축 시작점에서 정렬
- align-content : flex-end 교차축 끝점에서 정렬
- align-content : center 교차축 가운데 정렬
- align-content : space-between 시작, 끝 item이 끝으로 붙고 공백 공간을 균일하게 나누어 가짐
- align-content : space-around item의 앞뒤로 동일한 공백 공간을 가지게 됨
item 내부 속성
order
- 현재 요소의 배치 순서를 지정하는 속성
- 기본값 0, 미지정 시 코드 순서를 따름
flex-grow
- 기본값 0
- 모든 item에 같은 값을 주면 남은 공간을 나누어 분배하여 item들에 적용
- 각각의 item에 값을 따로 주게 되면 값에 맞게 분배하여 적용
flex-shrink
- 기본값 1
- item의 요소 크기가 container보다 클 때 사용하는 속성
- 0으로 선언 시 item 자신의 크기를 지키며 줄어들지 않는다.
- 큰 값을 가진 요소가 줄어드는 영역이 크다.
flex-basis
- 플렉스 아이템의 초기 크기를 지정하는 속성
- 지정하지 않을 시 width 값, width도 없을 시 콘텐츠 크기만큼을 가진다.
- 모두 0으로 지정해 동일한 비율을 가지는 것을 주로 이용
flex
- flex : grow shrink basis 의 순서로 작성한다.
- flex : number - grow
- flex : length or % - basis
- 속성 값을 1개 또는 2개의 숫자만 사용 시 basis 값이 0이 된다.
align-self
- align-items의 값을 무시하고 해당 item에만 속성을 적용
