flex container
한차원 하나의 축만을 가지고 정렬한다
기본적으로 x축을가지고 정렬을 한다.
flex-direction
flex-direction은 주축을 결정하는 옵션
row, column 등
기본적으로 row이고
이 때 가로로 정렬됨
flex-wrap
기본적으로 1차원이다.
이 때 한줄로 배치할 건지 여러줄로 배치할 건지 결정한다.
한줄은 nowrap 속성 (item 폭이 줄어듬 - 더이상 줄어들게 없을 때 까지)
여러줄은 wrap (너비가 넘치면 개행됨)
flex의 특징은 container가 크기가 줄어들면 item 크기도 같이 줄어듬
자식을 px로 해도 줄어든다.
flew-flow
flex-direction과 flex-wrap 단축속성
flex-flow : row nowrap
justify-content
축 기준으로 가운데 정렬
만약 flex-direction이 column일 떄
justify-content center하게 되면 수직 정렬이 된다.
축이 y축이기 때문이다.
space-around -> 여백 동일
space-between -> 양 끝에 여백 없이 여백 동일
space-evenly -> 여백 다 동일
align-items
플렉스 컨테이너 교차 축 위에서 플렉스 아이템들이 어떤 식으로 정렬될 것인지 결정
align-self
각각의 플렉스아이템이 교차축에서 어떤 식으로 정렬될 것인지 스스로 결정
align-items와 align-self 차이는 items같은 경우 부모에다 선언하여 자식 전부 적용
반면 align-self는 자식요소에다 선언하여 개벌적으로 적용
align-content
flex-wrap : wrap일 때에만 적용
wrap일 때 items 적용하고자 할 때 사용한다.
align-items의 flex-wrap: wrap 버전이다 라고 생각하면 된다.
flex-grow
플렉스 컨테이너 안에서 남은 공간을 아이템들이 차지할 수 있도록 사용합니다.
이때 flex-grow 비율별로 남은 공간을 분배하여 커지게 됩니다.
flex-shrink
0이면 줄어들지 않는다.
1이 기본값인데
여분 공간이 말고 여분 공간이 없고 줄어드는 상황에서 작동한다.
더 크면 줄어드는 양이 상대적인 비율대로 줄어들게 된다.
플렉스 아이템이 기본 크기보다 더 줄어들 수 있는 지 결정,
플렉스 컨테이너에서 할당받을 수 있는 공간을 상대적으로 정의한다.
flex-basis
플렉스 아이템의 초기 크기를 지정한다.
기본적으로 auto이고 auto는 컨텐트 크기만큼 지정된다.
flex 속성은
shorthand 속성이고
단축할 때 사용한다.
flex는 flex-grow, flex-shrink,flex-basis 순으로 단축 속성이다.
order
플렉스 아이템의 배치 순서를 설정할 수 있다.
지정한 숫자에 맞춰 오름차순으로 배치가 진행된다.
각 아이템의 order 속성을 추가하여 순서를 바꿀 때 사용한다.
HTML 코드는 변경되지 않고
화면만 바뀐다.
