[220408] Flex

: 수평 정렬을 보다 편하게 하기 위한 레이아웃 방식 (수직정렬도 가능)

div{dislpay: felx;}

- flex 의 필수는 container 와 item 으로 구성되고 각각 적용 가능한 속성이 구분됌

Flex container 속성

• display 
  : flex container 의 화면 출력 특성
  - flex 
  - inline-flex
• flex-direction
  :주 축 설정(수직, 수평 결정)
  - * row : 행 축
  - row-reverse : 행 축 (우->좌)
  - column : 열 축
  - column-reverse : 열 축 (하 -> 상)

• flex-wrap
  : 줄 바꿈 여부
  -*nowrap : 줄 바꿈 없음
  - wrap : 줄바꿈
• justify-content
  : 주 축의 정렬 방법
  - *flex-start : 시작점으로 정렬
  - flex-end : 끝점으로 정렬
  - center : 가운데 정렬
  - space-between : 각 item 사이를 균등하게 정렬
  - space-around : 각 item 외부 여백을 균등하게 정렬
• align-content
  : 교차 축의 여러 줄 정렬 방법
  - *stretch : 시작점으로 정렬
  - flex-start : 시작점으로 정렬
  - flex-end : 끝점으로 정렬
  - center : 가운데 정렬
  - space-between : 각 item 사이를 균등하게 정렬
  - space-around : 각 item 외부 여백을 균등하게 정렬
  

  

  

  
  
• align-items
  : 교차 축의 한 줄  정렬 방법
  *stretch : 교차 축으로 늘림
  - flex-start : 각 줄의시작점으로 정렬
  - flex-end : 각 줄의 끝점으로 정렬
  - center : 각 줄의 가운데 정렬
  - baseline : 각 줄의 문자 기준선에 정렬

  

Flex item 속성

• order 
  : flex item 의 순서(숫자가 작을 수록 먼저)
  -*0  
• flex-grow
  : item 의 증가 너비 비율
  - *0

• flex-shrink
  : item 의 감소 너비 비율
  - *1

 

• flex-basis
  : item 공간 배분 전 기본 너비
  - * auto : 요소의 content 너비

 

 

출처 : (KDT FE2) 한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online. 박영웅 강사님