CSS - Flexbox

 Flexbox

• flex의 유연성을 뜻하며 요소들을 자유자제로 위치시키는 뜻입니다.

새롭게 CSS3 명세에 반영된 레이아웃 모듈이며, 요소들이 수용된 공간을 어떻게 효과적으로 채워나갈지에 대해 고민하다가 만들어진 새로운 레이아웃 방식

 Flex Container - 부모

 display

그릇에 해당하는 부모 요소 (display: flex 혹은 display: inline-flex로 선언)

.flex-container { display: flex }

 flex-direction

컨테이너 안에 위치하는 자식 요소에 어떤 방향성을 줄 것인지 결정

.flex-container {
   display: flex;
   flex-direction: row;
  }

• row : 기본 값. 아이템이 수평방향(행)으로 흐르며, 방향성은 좌에서 우
• row-reverse : 아이템이 수평방향(행)으로 흐르며, 방향성은 우에서 좌
• column : 아이템이 수직방향(열)으로 흐르며, 방향성은 상에서 하
• column-reverse : 아이템이 수직방향(행)으로 흐르며, 방향성은 하에서 상

 flex-wrap

줄 넘김 처리

.flex-container {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
  }

• nowrap : 기본 값. 아이템을 한 줄에 모두 표현
• wrap : 아이템이 적정 길이 이상으로 길다면, 복수의 줄에 걸쳐 표현
• wrap-reverse : wrap과 같지만, 방향성이 반전되어 표현. 한마디로, 역방향으로 줄 넘김이 발생

 justify-content

수평 방향으로 정렬하는 방식

.flex-container {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: flex-start;
  }

• flex-start : 아이템을 한 덩어리로 묶어, 수평방향의 시작 점에 위치
• flex-enter : 아이템을 한 덩어리로 묶어, 수평방향의 끝 점에 위치
• center : 아이템을 한 덩어리로 묶어, 수평방향의 중앙에 위치
• space-between : 아이템을 컨테이너의 양쪽 끝에 맞춰 정렬
• space-around : 컨테이너의 양쪽 끝을 기준으로 각 아이템의 전, 후에 일정한 간격의 공간을 만들어 정렬

 align-items

수직방향으로 정렬하는 방식

.flex-container {
   display: flex;
   flex-flow: row nowrap;
   align-items:flex-start;
  }

• flex-start : 아이템을 한 덩어리로 묶어, 수직방향의 시작 점에 위치
• flex-enter : 아이템을 한 덩어리로 묶어, 수직방향의 끝 점에 위치
• center : 아이템을 한 덩어리로 묶어, 수직방향의 중앙에 위치
• baseline : 아이템을 컨테이너의 baseline에 맞춰 정렬
• stretch : 컨테이너의 양쪽 끝을 기준으로 각 아이템의 전, 후에 일정한 간격의 공간을 만들어 정렬

 align-content

한 줄을 넘기는 아이템들을 수직방향으로 정렬 ("align-itm"과 “justify-content” 속성을 모두 가지고 있음)

.flex-container {
   display: flex;
   flex-flow: row nowrap;
   align-items:flex-start;
  }

• flex-start : 아이템을 한 덩어리로 묶어, 수직방향의 시작 점에 위치
• flex-enter : 아이템을 한 덩어리로 묶어, 수직방향의 끝 점에 위치
• center : 아이템을 한 덩어리로 묶어, 수직방향의 중앙에 위치
• baseline : 아이템을 컨테이너의 baseline에 맞춰 정렬
• space-between : 컨테이너의 수직방향 기준으로 아이템 사이의 줄(행)을 일정한 간격을 두고 정렬
• space-around : 컨테이너의 양쪽 끝을 기준으로 각 아이템 줄(행)의 전, 후에 일정한 간격의 공간을 만들어 정렬
• stretch : 컨테이너의 양쪽 끝을 기준으로 각 아이템의 전, 후에 일정한 간격의 공간을 만들어 정렬