CSS - Flexbox (플렉스 박스)

기본 용어

---

Axis

• main axis : 이 축을 기본으로 배치됨
  - 범위 : main size (main-start ~ main-end)
• cross axis : main axis의 수직인 축
  - 범위 : cross size (cross-start ~ cross-end)
  
  

플렉스 컨테이너 속성 (Properties)

---

display (플렉스 컨테이너 정의)

.container {
  display: flex | inline-flex
}​

• flex (기본값) : flex 레이아웃 적용
  

  

• inline-flex : flex레이아웃 적용, container 영역이 item에 딱 맞춰짐

  

 

flex-direction (배치 방향)

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

• row (기본값) : 왼쪽→오른쪽
  

  

• row-reverse : 오른쪽→왼쪽

  

• column : 위→아래
  

  

• column-reverse : 아래→위
  

  

flex-wrap (줄바꿈 여부)

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap (기본값) : 모든 flex item들이 한 줄로 표시 (화면 크기 부족하면 스크롤바 생성)
  

  

• warp : 화면 크기 부족하면 위→아래 줄바꿈 발생
  

  

• warp-reverse : 화면 크기 부족하면 아래→위 줄바꿈 발생
  

  

 

flex-flow (flex-direction + flex-wrap)

.container {
  flex-flow: column wrap;
}

direction과 wrap 을 공백 구분자로 순서대로 입력

justify-content (main axis에서의 정렬 상태)

.container {
  justify-content: flex-start | flex-end | center;
  justify-content: space-between | space-around | space-evenly;
  justify-content: start | end | left | right;
}

• flex-start (기본값) : flex-direction의 시작 부분으로 정렬 (패킹)
  

  

• flex-end : flex-direction의 끝 부분으로 정렬 (패킹)
  

  

• center : 중앙 정렬

  

  space-between : 첫 항목은 시작점, 끝 항목은 끝점, 나머지는 고르게 정렬
  

  

• space-around : 각 항목의 좌/우를 동일 간격으로 배치

  

  

• space-evenly : 가장자리 까지 완전히 동일 간격으로 배치

  

  

align-items (cross axis에서 정렬 상태)

.container {
  align-items: stretch | flex-start | flex-end | center;
  align-items: baseline | first baseline | last baseline;
  align-items: start | end | self-start | self-end
}

• stretch (기본값) : 컨테이너를 채우기 위해 늘림 (최소/최대 너비는 준수)
  width나 height가 auto인 경우에만 아래와 같이 늘어나 보인다.
  

  

  
  
• flex-start / start / self-start : cross axis 의 시작 부분에 배치됨
  

  

• flex-end / end / self-end : cross axis의 끝 부분에 배치됨
  

  

• center : Cross axis의 중앙에 배치
  

  

  25

• baseline : 기준선이 정렬된 것 처럼 항목을 정렬
  

  

align-content (flex-wrap: wrap 일때 줄바꿈 발생한 요소의 여백 처리 방식)

.container {
  align-content: flex-start | flex-end | center;
  align-content: space-between | space-around | space-evenly;
  align-content: stretch | start | end | baseline | first baseline | last baseline;
}

• normal (기본값) : 기본 위치에 패킹
  
  
• flex-start / start : cross axis 의 시작 부분에 배치됨

  

• flex-end / end : cross axi 끝 부분에 배치됨.
  

  

• center : cross axis의 중앙에 배치됨.
  

  

• space-between : 첫 항목은 cross axis의 시작 부분, 끝 항목은 cross axis의 끝 부분, 나머지는 고르게 분포
  

  

• space-around : 위/아래 또는 좌/우에 동일 간격 배정
  

  

• space-evenly : item 주변에 동일 공간을 배정

  

• stretch : 나머지 공간을 차지하도록 늘어난다.
  (참고로 item들의 너비 혹은 높이가 auto로 되어있어야 작동함)
  

  

 

Flexbox 접두사

---

여러 브라우저 지원을 위해 접두사가 필요하다.

예를 들면 아래와 같이 브라우저 별로 필요한 처리가 몇 가지 있다. 

1. webkit 계열 브라우저(Chrome, Safari), Android 에서는 form 컨트롤 요소가 flex item 되지 않음.
   flex item이 되도록 하려면 -webkit-apperance:none;​ 를 처리해주어야 함.
   
   
2. Android 2.1~4.3 브라우저는 2009년 flex 명세에 -webkit- 접두사 필요함.
3. IE 10 브라우저는 2012년의 flex 명세 지원함. IE 10 브라우저 지원을 위해 -ms- 접두사 필요
   
   

매번 접두사 붙이는 게 쉬운 일이 아니므로 mixin 이라는 것을 쓴다. (따로 포스팅 예정)

css에서 사용하는 함수라 생각하면 되겠다.

/* 선언 */
@mixin 이름(인자) {
속성..
}

/* 적용 */
.. {
@include 이름(인자)
}

아래와 같이 mixin을 선언하고 필요할 때 @include를 통해 한번에 다 적용해줄 수 있다.
혹은 기능별로 브라우저 호환되도록 각각 mixin을 만들어서 그걸 쓰면 된다.
참고로 @function도 있다. 그 안에서 @if 와 @return 로 제어가 가능하다.

@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;
}

.wrapper {
  @include flexbox();
}

.item {
  @include flex(1 200px);
  @include order(2);
}