display: flex
css에서 요소에 display: flex를 지정하면 자식요소들이 item화 된다.
dispaly:flex를 지정한 것과 똑같은 요소에 속성을 부여하면 item들이 정렬된다.
container 박스에 주는 속성
부모 요소에게 지정하는 속성
display: flex
→block에서flex로 변경
default: row nowrap
flex-flow: row nowrap ;
flex-direction
→ 아이템의 배치방향을 지정
row: 왼쪽에서 오른쪽으로
column: 위에서 아래로
row-reverse: 오른쪽에서 왼쪽으로
column-reverse: 아래에서 위로
flex-wrap
→ 아이템의 배치를 1줄 또는 여러줄로 지정
wrap: 줄을 바꿀 수 있게
nowrap: 줄을 바꾸지 않는다.
wrap-reverse: 반대 방향으로 줄을 바꾼다.
initial: 기본값
inherit: 부모 요소로부터 상속값을 받는다.
justify-content
→ 주축 방향 정렬
flex-start: 기본값, container 시작위치(왼쪽)부터 정렬
flex-end: container 끝(오른쪽)부터 정렬
center: 중앙에 정렬
space-between: 첫 item을 시작위치, 끝 item을 마지막에 위치. 남은 item은 일정한 간격으로 배치
space-around: item을 일정한 간격으로 배치
space-evenly: 완전히 균등한 공간으로 배분
initial: 기본값
inherit: 부모 요소로부터 상속값을 받는다.
align-items
→ 한 줄에 있는 아이템의 교차축 방향 정렬
flex-start: flex의 item들을 container의 시작에 위치시키지만, 각 item의 콘텐츠 양에 따라 결정
flex-end: flex-start와 동일하지만 container의 끝부터 정렬
center: item 별로 위, 아래 공간이 균일하게 배
stretch: 기본값. 모든 flex의 item들이 동일한 높이값을 가지도록 조정
baseline: 각 item의 중심을 기준으로 일정하게 정렬
align-content
→ 여러 줄의 아이템의 교차축 정렬
flex-start: 위쪽부터 덩어리 형태로 배치, 여유 공간은 아래쪽에 위치
flex-end: 아래부터 덩어리 형태로 배치, 여유 공간은 위쪽
center: 교차축에 대해 수직 방향으로 기준으로 정렬
stretch: container의 높이가 일정하도록 배치
space-between: justify-content와 동일 하나 기준 축이 교차 축
space-around: justify-content와 동일 하나 기준 축이 교차 축
space-evenly: justify-content와 동일 하나 기준 축이 교차 축
item에게 주는 속성
order
→ 아이템의 배치 순서를 지정
order: 작은숫자;로 지정하면 순서가 앞으로 지정된다.
default: 0
flex-basis
→ 플랙스 아이템의 넓이 값을 지정.
값을 지정하고 남는 값은 grow / shrink로 재분배된다.
default: auto
flex-grow
→ 플렉스 아이템의 넓이를 늘어나도록 정의해 줄 수 있는 속성.
flex-basis를 정하게 되더라도 flex-grow의 속성이 우선된다.
flex-shrink
→ flex-grow와 반대되는 개념.
→ 아이템의 총너비의 합이 컨테이너보다 클 경우, flex-shrink의 기준대로 재 분배된다.
align-self
→ flex 아이템 그 자체의 정렬을 바꿔주는 것.
container에서 설정 가능한align-contentoralign-item은 일괄 적용이라면,
align-self는 아이템 개별로 제어가 가능.
stretch
flex-start
flex-end
center
baseline
참고자료
A Complete Guide to Flexbox | CSS-Tricks
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
