VSCODE | CSS - flex

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

CSS Flex(Flexible Box) 완벽 가이드

 

레이아웃을 구성할 때 float, position을 사용하지만, flex문법을 통해서도 할 수 있습니다.

flex 레이아웃은 부모박스에 flex를 선언하고, 안에 있는 박스요소를 유연하게 배치하는 속성입니다.

 

부모박스 (Container)

- display

- flex-flow

: flex-decoration, flex-wrap

- justfy-content

- align-content

- align-items

 

flex 박스 선언

flex : Block 특성의 Flex Container를 정의

inline-flex : Inline 특서의 Flex Container 를 정의 

 

flex-direction

- 기본값 : row

row : items를 수평축(왼쪽에서 오른쪽으로)으로 표시

row-reverse : items를 row의 반대 축으로 표시

column : items를 수직축(위에서 아래로)으로 표시

column-reverse : items를 column의 반대 축으로 표시

 

flex-wrap 

- 기본값 : nowrap

no-wrap: 모든 items를 여러줄로 묶지 않음(한줄에 표시)

wrap : items를 여러 줄로 묶음

wrap-reverse : items를 wrap의 역방향으로 여러줄로 묶음

 

justify-content 메인축 정렬

- 기본값 : flex-start

flex-start : items를 시작점(flex-start)으로 정렬

flex-end : items를 끝점(flex-end)으로 정렬

center : items를 가운데 정렬

space-between : 시작 item은 시작점에, 마지막 item은 끝점에 정렬되고 나머지 items는 사이에 고르게 정렬됨

space-arround : items를 균등한 여백을 포함하여 정렬

 

align-items 반대축 정렬(한줄 일 때 사용)

- 기본값 : stretch 

stretch : container의 교차 축을 채우기 위해 items를 늘림

flex-start : items 를 각 줄의 시작점(flex-start)으로 정렬

flex-end :items 를 각 줄의 끝점(flex-end)으로 정렬

center : items를 가운데 정렬

baseline : items를 문자 기준선에 정렬

 

align-content 반대축 정렬(두줄 일 때 사용)

- 기본값 : stretch 

stretch : container의 교차 축을 채우기 위해 items를 늘림

flex-start : items 를 각 줄의 시작점(flex-start)으로 정렬

flex-end :items 를 각 줄의 끝점(flex-end)으로 정렬

center : items를 가운데 정렬

space-between : 시작 item은 시작점에, 마지막 item 은 끝점에 정렬되고 나머지 items는 사이에 고르게 정렬됨

space-arround : items를 균등한 여백을 포함하여 정렬

 

 

자식박스 (item)

- order : 순서 (숫자가 클수록 순서가 뒤임)

- flex

: flex-grow(증가너비비율-숫자가 높으면 더 많이 증가)

  flex-shrink(감소너비비율-숫자가 높으면 더 많이 감소)

  flex-basis(기본 너비)

align-self