[CSS] Flex 정리

자꾸 안에 속성들을 까먹어서 구글링 하는 나를 위해 CSS의 Flexible Box 속성을 정리해보려고 한다.

아래처럼 div가 구성되어있다고 하자.

/* 내가 자주 쓰고 잘 아는 부분 */

 

Container 에게 Flex를 줘야한다.

display: flex / inline-flex

container가 inline이 되느냐, 아니냐의 차이같다.

 

그 다음 속성으로는 내부 item의 방향을 정하자.

flex-direction: row / column / row-reverse / column-reverse

 

방향을 정했더니, item이 삐져나갔네. 줄바꿈 처리를 하자.

flex-wrap: no-wrap / wrap / wrap-reverse

 

위 두개를 같이 하자.

flex-flow: row wrap / direction wrap ...

 

다음 속성으로 내부 item의 정렬 방식을 정하자.

주 축 방향

justify-content: flex-start / flex-end / center / space-between(사이 간격) / space-around(둘레 간격) / space-evenly(사이, 둘레 간격)(IE, Edge x)

 

수직 축 방향

align-items: stretch / flex-start / flex-end / center / baseline

 

수직 축 방향(wrap이 설정된 상태에서 여러줄 나왔을 때)

align-content: flex-start / flex-end / center / stretch / space-between / space-around / space-evenly

 

 

/* 내가 매번 검색하는 부분(item 속성) */

 

이제부턴 컨테이너 내부 아이템들을 위한 속성이다.

 

한 item의 수직 축 정렬 상태만 바꾸고 싶다.

align-self : auto / stretch / flex-start / flex-end / baseline / center

 

아이템의 증가 비율을 설정하자

flex-grow : 0( flex-basis보다 커지지 않음 ) / 1

남은 여백을 저 비율에 따라 나눠 가질 것임.

 

아이템의 감소 비율을 설정하자

flex-shrink : 1 / 0 ( flex-basis보다 작아지지 않음 )

 

flex item의 주축 방향 기본 크기를 정하자.

flex-basis : auto / 0 / % / em / cm / px ...

flex-basis 보다 큰 경우는 건들지 않음.

 

위 세개를 다 같이 적용하자.

flex : grow / shrink / basis

 

item 순서 와 z-index는

order: 1 / 2 / 3 ...

z-index: 1/ 2 /3 ...

 

다음 번에는 css grid를 공부해야겠따..

 

 

참고 자료

studiomeal.com/archives/197

heropy.blog/2018/11/24/css-flexible-box/