어드민 개발하면서 flex 써먹은거 정리

flex 부모(container)와 자식(item)으로 나뉜다.

부모는 전체적인 정렬, 흐름을 제어한다.

flex

flex : 1; (1 1 0) grow, shrink, basis 순으로 값이 정해진다.

flex-item의 확장에 관련된 속성 0이상의 양의 정수

값이 0이면 flex container의 크기가 커져도 flex item의 크기가 커지지 않음 값이 1 이상이면 1이상의 값읋 가져야함

0이상의 양의 정수

값이 0이면 container의 크기가 item보다 작아져도 item의 크기는 줄어들지 않고 원래 크기 유지 1이상이면 container가 item보다 작아질 때, 그것에 맞춰 item이 줄어든다.

기본크기 결정(auto가 기본값)

px, %등과 같은 width에서 사용하는 단위.

값을 0으로 하면 flex item의 크기가 고정됨. 이렇게 하면 flex-container를 기준으로 크기가 결정됨.

intial: 기본값. flex container의 크기가 작아지면 flex item의 크기가 작아진다. 하지만 flex container의 크기가 커져도 item의 크기는 커지지 않음.
none: flex itemㅇ의 크기가 커지거나 작아지지 않는다. flex container의 크기에 영향을 받지 않음. 원래 크기 유지
auto: 크기에 맞춰 크기가 커지거나 작아짐
양의 정수 : container를 일정한 비율로 나눠가짐.

자식요소들을 정렬

자식들의 수직 중앙 정렬

Last updated 5 years ago

Was this helpful?