flexbox

flexbox

• 가변적인 박스를 간단하게 만드는 기술
• 웹사이트 구조 설계를 위한 기술
• 박스 쉽게 배치할 수 있다는 장점
• 플렉서블 박스의 특정 속성값을 설정하여 여러 박스의 높이/길이/위치 등이 유연하게 작동하는 박스를 간단히 만들 수 있음
• 요소의 배치를 1차원적으로 효과적으로 할 수 있게 도와주는 css의 기능

flexbox 구성요소

flex container = 부모 박스

• 가변적인 박스로 작동하기 위한 기본 개념
• flexbox를 사용하기 위한 필수 개념
• wrap처럼 모든 flex item을 감싸고 있는 존재
• 특정 속성값을 적용하여 가변적인 박스로 작동하게 함
• 여러 속성을 통해 내부 아이템의 정렬 및 속성 부여 가능
• 반드시 display 속성에 flex 또는 inline-flex 키워드를 주어야 flexbox로 사용 가능

flex item = 자식 박스

• flexbox의 내부를 구성하는 자식 요소들
• 정렬 대상
• 다양한 속성값에 의해 배치 순서, 내부 내용 정렬 가능

주축과 교차축

주축

• flexbox 내부의 item을 쌓아 갈 방향
• flex item 배치의 중심이 되는 축
• flex-direction 에 의해 정의됨
  • row (default)
  • row-reverse
  • column
  • column-reverse
    • row 또는 row-reverse -> 주축은 인라인 방향으로 행을 따름 (페이지 좌측 -> 우측 또는 우측 -> 좌측)
    • column또는 column-reverse -> 주축은 블록 방향으로 행을 따름 (페이지 상단 -> 하단 또는 하단 -> 상단)
    • flex-direction: column -> 행의 끝까지 영역을 차지
    • flex-direction: row -> 내부 컨텐츠만큼의 영역만 차지

교차축

• 주축의 반대방향 (주축에 수직함)
  • 주축 = row(가로) -> 교차축 = column(세로)
  • 주축 = column(세로) -> 주축 = row(가로)
• flexbox에서는 기본적으로 교차축 방향의 가장 큰 엘리먼트에 크기를 맞추도록 되어 있음

flexbox 적용 속성

flex container (부모 박스)에 설정하는 속성

• display : 부모 박스 배치 형태
  • flex : 수직 정렬 (block 형태)
  • inline-flex : 수평 정렬 (inline-block)
• flex-direction : item 배치 형태
  • row : 왼쪽 -> 오른쪽
  • row-reverse : 오른쪽 -> 왼쪽
  • column : 위 -> 아래
  • column-reverse : 아래 -> 위
• flex-wrap
  • wrap : 여러 줄
  • nowrap : 1줄
  • wrap-reverse. 여러 줄. 아래 -> 위
• flex-flow
  • flex-direction과 flex-wrap을 한 번에 선언 가능
  • ex) flex-flow : column no wrap;
• justify-content (주축을 따라 flex item 정렬)
  • flex-start: flexbox의 시작점 기준으로 item 정렬 (default)
  • flex-end: flexbox의 끝점 기준으로 item 정렬
  • space-between : item들 사이에 균일한 간격의 빈 공간을 위치 시킴
  • space-around: item들 사이에 균일한 간격의 빈 공간을 위치 시킴 + 양 옆에도 약간의 빈 공간 존재
  • space-evenly : item들 사이 뿐만 아니라 양 옆에도 균일한 간격의 빈 공간을 위치 시킴

justify-content: flex-start;
justify-content: flex-end;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly ;

• align-items (교차축을 따라 flex item 정렬. 컨테이너 안에서 item들이 어떻게 정렬하는지를 지정)
  • center : (교차축=y축일 때 item들 수직 중앙 정렬, x축일 때 수평 중앙 정렬)
  • flex-start : (교차축=y축일 때 item들을 교차축 y의 시작점 기준으로 정렬)
  • flex-end : (교차축=y축일 때 item들을 교차축 y의 끝점 기준으로 정렬)
  • stretch : (교차축 기준 내부 item들 중 가장 높이가 큰 item 기준으로 높이 설정)

align-items: center; 
align-items: flex-start;
align-items: flex-end; 
align-items: stretch;

• align-content (여러 줄 들 사이의 간격 지정)
  • flex-start : 여러 줄들을 컨테이너의 꼭대기에 정렬
  • flex-end : 여러 줄들을 컨테이너의 바닥에 정렬
  • center : 여러 줄들을 세로선 상의 가운데에 정렬
  • space-between : 여러 줄들 사이에 동일한 간격
  • space-around : 여러 줄들 주위에 동일한 간격
  • stretch : 여러 줄들을 컨테이너에 맞도록 늘림

flex item (자식 박스)에 설정하는 속성

• order
  • 내부 items들 정렬 순서 지정
  • 기본 값 (현재 자신 위치 값) = 0
  • 양수 음수 모두 가능
• flex-grow
  • 컨테이너의 크기가 커질 경우, item 자신의 고유한 사이즈를 어떻게 변경할 지 지정
  • default = 0, 변경하지 않음
  • 첫 번째 요소의 flex-grow 값을 2로, 나머지 요소의 flex-grow 값을 1로 설정하면 첫 번째 요소가 나머지 요소들의 크기보다 2배 커짐
• flex-shrink
  • 컨테이너의 크기가 커질 경우, item 자신의 고유한 사이즈를 어떻게 변경할 지 지정
  • flex-grow의 반대 개념
• flex-basis
  • item들이 공간을 얼마나 차지해야 하는지 세부적으로 명시
  • 컨테이너의 width에 따라서 각 item들이 몇 % 비율의 크기를 가질 지를 지정 (flex-grow + flex-shrink)
• align-self
  • 컨테이너에 지정된 배치 속성들로부터 벗어나서 아이템 각각 하나하나에 배치 속성 부여 가능