CSS - flex 정리

flex-grow: 1;

할당 가능한 공간의 정도

형제 아이템들이 모두 동일한 공간

 

flex-item:nth-child(1) {

   flex-grow: 2;

}

이 경우에 형제 중 첫번째는 두배 공간

 

flex-shrink 는 줄어드는 성격

flex-container에 맞춰서 알아서 줄어든다.

flex-shrink: 0 은 flex-container에 맞춰서 줄어들지 않겠다.

 

flex-basis 는 초기 크기 설정

auto가 아닌 flex-basis 와 width (direction: column이면 height가 됨) 중에 flex-basis가 우선임

 

이것들을 축약해서 쓸때는

flex-grow flex-shrink flex-basis 순서임

flex: 0 1 150px;

라고 쓸 수 있음 

 

flex-direction 은 방향에 대한 값

- row

- column

- row-reverse

- column-reverse

 

정렬에 대한 내용

메인 축 justify-content

교차하는 축 align-items

- flex-start

- flex-end

- center

- space-between item간의 간격을 맞춤

- space-around item 양끝 쪽을 item간의 절반으로 맞춰줌