flexbox
container
display
flex : 아이템이 왼쪽에서 오른쪽으로 정렬(row와 같은 개념),
자신이 설정한 width만큼 차지
inline-flex : inline-block처럼 동작
flex-direction
row : 왼쪽에서 오른쪽으로 아이템 배치
row-reverse : 오른쪽에서 왼쪽으로 아이템 배치
column : 위에서 아래로 아이템 배치
column-reverse : 아래에서 위쪽으로 아이템 배치
이때 아이템이 배치된 방향의 축을 메인축(Main Axis), 메인 축과 수직인 축을(Cross Axis)라고 부름
flex-wrap
컨테이너가 더 이상 아이템들을 한 줄에 담을 공간이 없을 때
nowrap : 줄바꿈을 하지 않음, 넘치면 삐져나감
wrap : 아이템이 한 줄에 꽉 차게 되면 자동적으로 다음라인에 배치
wrap-reverse : 줄바꿈은 하는데, 아이템을 역순으로 배치
flex-flow
column, nowrap(direction과 wrap을 동시에 작성 가능)
justify-content(메인축)
중심축을 기준으로 아이템 위치 결정
flex-start : 아이템을 시작점으로 정렬(flex-direction으로 지정한 것에 따라 기준 설정)
flex-end : 아이템들을 끝점으로 정렬
center : 아이템을 가운데로 정렬
space-around : 아이템의 둘레에 균일한 간격을 만듬
space-even : 아이템들 사이와 양 끝에 균일한 간격을 만듬
space-between : 아이템 사이에 균일한 간격을 만듬
align-items(수직축, 전체 아이템)
반대축에서 아이템 위치 결정
stretch : 아이템들이 수직축 방향으로 끝까지 쭈욱 늘어남
flex-start : 아이템을 시작점으로 정렬(flex-direction으로 지정한 것에 따라 기준 설정)
flex-end : 아이템들을 끝점으로 정렬(flex-direction으로 지정한 것에 따라 기준 설정)
center : 중간에 배치
baseline : 텍스트가 균등하게 보여질 수 있도록
align-content(수직축)
flex-wrap : wrap이 설정된 상태에서, 아이템들의 행이 두줄 이상 되었을 때 수직축 방향 정렬
flex-start
flex-end
center
space-around
space-even
space-between
만약, flex-direction : column, justify-content : flex-end 시
아래에 붙어서 차례대로 정렬되지만 순서는 위에서부터 정렬됨
flex-glow
컨테이너를 늘릴 때 지정한 숫자에 따라서 해당 아이템이 유연한 박스로 변하고 원래 크기보다 커지며 빈 공간을 메우게 된다
flex-shrink
컨테이너를 줄일 때 지정한 숫자에 따라서 더 많이 줄어드는 것 유연한 박스로 변하고 원래 작아진다
flex-basis
컨테이너를 늘릴 때도, 줄일 때도 동시에 차지하길 원하는 비율을 적어주기
align-self
아이템 하나만 원하는 자리에 배치 가능
