[CSS] flex 요약 정리

* 붙은게 Default

Flex container 속성

1. flex-direction 

  * row, column, row-reverse, column-reverse

 

2. flex-wrap

  * no-wrap > 넘치면 넘치는 대로 나감

    wrap > 넘치면 다음으로 넘어감

 

3. justify-content

  * flex-start 기준점 부터 시작

    flex-end 기준점 반대 부터 시작

    center 가운데 정렬

    space-between 양 끝에 붙이고 균일한 여백 생성

    space-around 위의 것에서 끝에 여백 생성

    space-evenly 위의 것의 모든 여백이 균일

 

4. align-items

  * stretch 수직으로 늘림

    flex-start 시작 기준 

    flex-end 끝 기준

    center 가운데 정렬

    baseline 베이스라인 기준

Flex iten 속성

flex-grow, flex-shrink, flex-basis가 있다.

flex-grow 커지는 비율 

flex-shrink 줄어드는 비율

flex-basis 기본 크기 (basis에 퍼센트를 주어 공간을 나눌 수 있다.)

 

flex로 묶어서 사용한다.

=> flex: grow값 shrink값 basis값