[프론트엔드] 9. flex

flex container : display:flex; 속성을 적용할 요소.
flex items : flex container 안의 요소들.

[ 1 ] flex container

1) display

: 요소의 출력 특성 설정

• 설정값
  • flex : container = 블록 요소
  • inline-flex : container = 인라인 요소

2) flex-direction

: 주 축 (Main-axis) 설정

• 기본값
  • row : x 축 , 시작점 ( 좌 - > 우 ) 끝점
• 설정값
  • row-reverse : x 축 , 끝점 ( 좌 - > 우 ) 시작점
  • column : y 축 , 시작점 ( 위 - > 아래 ) 끝점
  • column-reverse : y 축 , 끝점 ( 위 - > 아래 ) 시작점

3) flex-wrap

: 줄바꿈 여부

• 기본값
  • nowrap : 줄바꿈 없음
• 설정값
  • wrap : 줄바꿈 있음
  • wrap-reverse : wrap 반대방향으로 줄바꿈

4) justify-content

: 주 축 방향 정렬

• 기본값
  • flex-start : items를 시작점 정렬
• 설정값
  • flex-end : items를 끝점 정렬
  • center : items를 가운데 정렬
  • space-between : 각 item 사이를 균등하게 정렬
  • space-around : 각 item의 외부 여백을 균등하게 정렬

5) align-content

: 교차 축 방향 여러 줄 정렬
: 조건 = flex-wrap:wrap;, 2줄 이상, 여백 존재

• 기본값
  • stretch : items를 시작점 정렬, 각 줄을 균등하게 늘리기
• 설정값
  • flex-start : items를 시작점 정렬
  • flex-end : items를 끝점 정렬
  • center : items를 가운데 정렬
  • space-between : 각 item 사이를 균등하게 정렬
  • space-around : 각 item의 외부 여백을 균등하게 정렬

6) align-items

: 교차 축 방향 한 줄 정렬

• 기본값
  • stretch : items를 교차 축으로 늘리기
• 설정값
  • flex-start : items를 각 줄의 시작점 정렬
  • flex-end : items를 각 줄의 끝점 정렬
  • center : items를 각 줄의 가운데 정렬
  • baseline : item를 각 줄의 문자 기준선에 정렬

[ 2 ] flex items

1) order

: item의 정렬 순서

• 기본값
  • 0 : 순서 없음
• 설정값
  • 숫자 : 숫자가 작을수록 먼저 정렬

2) flex-grow

: item의 증가 너비 비율
: 요소를 제외한 여백을 채우는 비율

• 기본값
  • 0 : 증가 없음
• 설정값
  • 숫자 : 숫자만큼의 증가 비율

3) flex-shrink

: item의 감소 너비 비율
: container의 너비가 items의 너비보다 작아졌을 때 감소하는 너비 비율

• 기본값
  • 1 : 감소 비율 적용
• 설정값
  • 숫자 : 숫자만큼의 감소 비율

4) flex-basis

: item의 공간 배분 전 기본 너비

• 기본값
  • auto : content 너비
• 설정값
  • 단위 : px em vw ...