19. CSS - FlexBox

• FlexBox
  • 요소의 정렬되는 방향, 순서, 요소 간의 간격을 개발자가 수치적으로 처리하지 않아도 알아서 유연하게 처리해주는 형식.
• flex 작성법 -> display : flex; 
  • FlexBox구성
    • flex-container : 정렬이 필요한 요소를 감싸는 요소
    • item : 정렬이 필요한 요소(정렬 적용 대상)
    • flex 관련 css 속성이 flex-container와 item이 구문이 나누어져 있음.
  • FlexBox의 축(axis)
    • 중심축(main axis)
    • 교차축, 반대축 (cross axis)

 

 

• flex-direction(방향)
  • main-axis(중심축)의 방향과 시작 위치를 지정
    • 가로 방향(행, 기본값) : row
    • 가로 역방향 : row-reverse
      • 세로 방향(열) : columns
    • 세로 역방향 : columnsS-reverse

 

 

• flex-wrap
  • 내부 item들을 포장하는 속성
  • item들이 강제로 한 줄에 배치되게 할 것인지 flex-container를 벗어나 여러 줄로 배치되게 할 것인지 지정
  • 작성법 -> flex-wrap : nowrap / wrap
    • nowrap = 기본값
    • wrap = 여러 줄 배치
    • wrap-reverse = 뒤에서 부터 배치

 

 

• felx-flow
  • flex-direction 과 flex-wrap을 한번에 지정하는 속성
  • flex 설계 시 가장 기본이 되는 설정이기 때문에 둘을 한 번에 지정하는 속성 존재

 

 

• justify-content
  • 내용을 조정
    • flex-start : main-axis 시작지점을 기준으로 정렬(기본값)
    • flex-end : main-axis 끝지점을 기준으로 정렬
    • center : main-axis 가운데 정렬
    • space-around : main-axis 방향으로 item 주위에 일정한 크기의 공간을 추가해서 item들이 간격을 두고 배치되도록 지정
    • space-evenly : item이 main-axis 방향으로 동일한 간격을 가지게 됨
    • space-between : 양 끝의 item을 main-axis 시작'/끝 지점에 붙인 상태에 item들이 동일한 간격을 가지게 지정

 

 

• align-items
  • main-axis에 정렬된 items들을 cross-axis 방향으로 정렬하는 방법을 지정하는 속성
    • stretch : item에 corss-axis 방향으로의 크기 지정이 없을 경우 감싸고 있는 flex-container의 크기와 같은 크기 가지도록 늘리는 속성
    • flex-start : cross-axis의 시작 지점을 기준으로 배치
    • flex-end : cross-axis의 끝 지점을 기준으로 배치
    • center : cross-axis의 가운데 배치
    • baseline : item 내부 content가 모두 한 줄에 배치될 수 있도록 각각의 item을 cross-axis 방향으로 움직이는 속성