CSS - flex

flex는 요소를 정렬시키기 위해 쓰는 속성값이다.

부모요소에 display: flex; 라는 속성을 사용하면 flaot 속성을 쓰지 않고도 자식요소를 좌측 또는 우측으로 흐르게 만들 수 있을 뿐만 아니라 justyfy-content나 align-items를 사용하면 margin이나 position 속성을 쓰지 않고도 요소를 손쉽게 원하는 곳을 기준으로 정렬 시킬 수 있다.


flex container (부모요소)

display: flex container를 정의
- flex; 부모요소가 block 속성값을 가짐
- inline-flex; 부모요소가 inline 속성값을 가짐

flex-flow: flex-direction과 flex-wrap의 단축 속성

flex-direction: flex items의 주 축을 설정
- row: 왼쪽에서 오른쪽으로
- row-reverse: row의 반대축으로
- column: 위에서 아래로
- column-reverse: column의 반대

flex-wrap: flex items의 여러 줄 묶음 설정
- nowrap: 모든 item을 한 줄에 표시. 이미 지정된 크기 무시
- wrap: item들을 여러 줄로 묶음. 줄바꿈 하려면 wrap 사용
- wrap-reverse: item들을 wrap의 역방향으로 여러 줄로 묶음
     
justify-content: 주 축의 정렬 방법을 설정
- flex-start: items를 시작점으로 정렬
- flex-end: items를 끝점으로 정렬
- center: items를 가운데 정렬
- space-between: 시작 item은 시작점에, 마지막 item은 끝점에 정렬되고 나머지는 고르게 정렬
- space-around: items를 균등한 여백을 포함하여 정렬
     
align-content: 교차 축의 정렬 방법을 설정 (2줄 이상일 때)
- stretch: container의 교차 축을 채우기 위해 items를 늘림
- flex-start: items를 시작점으로 정렬
- flex-end: items를 끝점으로 정렬
- center: items를 가운데 정렬
- space-between: 시작 item은 시작점에, 마지막 item은 끝점에 정렬되고 나머지는 고르게 정렬
- space-around: items를 균등한 여백을 포함하여 정렬
     
align-items: 교차 축에서 items의 정렬 방법을 설정(1줄)
- stretch: container의 교차 축을 채우기 위해 items를 늘림
- flex-start: items를 시작점으로 정렬
- flex-end: items를 끝점으로 정렬
- center: items를 가운데 정렬
- baseline: items를 문자 기준선에 정렬

flex item(자식요소)

order: flex item의 순서를 설정
-값: 숫자. 숫자가 클수록 순서가 밀린다. 0부터 시작. 음수 허용
    
flex: flex-grow, flex-shrink, flex-basis의 단축속성

flex-grow: flex item의 증가 너비 비율을 설정. 기본값 0
ex) 1, 2, 1 이라면 각각 비율이 1:2:1
    
flex-shrink: flex item의 감소 너비 비율을 설정. 기본값 1

flex-basis: flex tiem의 기본 너비 설정. 기본값 auto. 단위로 지정

align-self: 교차 축에서 item의 정렬 방법을 설정. 기본값 auto
- auto: container의 align-items 속성을 상속받음
- stretch: container의 교차 축을 채우기 위해 item을 늘림
- flex-start: item을 각 줄의 시작점으로 정렬
- flex-end: item을 각 줄의 끝점으로 정렬
- center: item을 가운데 정렬
- baseline: item을 문자 기준선에 정렬