flex 관련 속성

● flex-direction 속성

 - 아이템의 배치 방향을 결정

 - flex-direction: row | row-reserve | column | column-reverse | initial | inherit

    - row : 가로로 정렬 (기본값)

    - row-reserve : 가로로 오른쪽에서 정렬

    - column : 세로로 정렬

    - column-reverse : 세로로 밑에서부터 정렬

    - initial : 기본값으로 설정

    - inherit : 부모 요소로부터 상속받음

 

● flex-wrap 속성

 - 아이템이 컨테이너의 공간을 넘칠 경우, 아이템의 줄바꿈을 어떻게 할 것이지 결정하는 속성

 - flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit

    - nowrap : 줄바꿈을 하지 않음 (기본값)

    - wrap : 아이템들이 넘칠 경우, 나머지 요소들을 다음 줄로 줄바꿈함

    - wrap-reverse : wrap과 동일하나, 역순으로 배치

    - initial : 기본값으로 설정

    - inherit : 부모요소로부터 상속받음

 

● flex-basis 속성

 - 아이템들의 기본 크기를 설정 (flex-direction이 row 일 경우 너비, column 일 경우 높이를 조절함)

 - flex-basis: 숫자값

 

● flex-grow 속성

 - 유연한 박스로 변함 (원래의 크기보다 커지며 빈 공간을 차지함)

 - flex-grow: 숫자값 (차지하는 비율)

 

● flex-shrink 속성

 - 얼마나 줄어들지 설정

 - flex-shrink: 숫자값 (줄어드는 비율)

 

● flex 속성

 - flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 속성