CSS_flexbox

Flexbox

• CSS3 등장부터 나타난 방식
• 화면 레이아웃을 구성할 때, 가장 많이 사용하는 방법 중 하나
• 부모 요소에 flex를 선언하면 , 자식 요소들의 레이아웃을 변경 시킴

Flex-Container

• flex 속성을 갖는 요소로 flex 부모 요소라고도 함
• 컨테이너에 적용 가능한 속성이 있음

Flex-Items

• flex 속성을 갖는 요소의 자식 요소들로 flex 자식 요소라고도 함
• 아이템에 적용 가능한 속성이 있음

FlexBox 기본 용어

• 주축 (Main Axis)
  - 컨테이너 내에서 flex 아이템들이 배치되는 기본 방향을 나타내는 축

• 교차축 (Cross Axis)
  - 주축에 수직인 축
  

#1. flex-direction

: flex 방향을 설정 (주축 방향 설정)

• row (default) : 수평 정렬 (좌 -> 우)
• row-reverse : 수평 정렬 (우 -> 좌)
• column : 수직 정렬 (위 -> 아래)
• column-reverse : 수직 정렬 (아래 -> 위)

row

flex-direction: row; 
flex-direction: row-reverse; 

column

flex-direction: column; 
flex-direction: column-reverse; 

#2. justify-content

: 주축을 따라 아이템을 어떻게 배치할 것인지?

• flex-direction 이 수평 정렬;
  주축 = row (가로)
• flex-direction 이 수직 정렬;
  주축 = column (세로)
• flex-start (default) : 아이템을 주축에 대해서 start 지점을 기준으로 나열
• flex-end : 아이템을 주축에 대해서 end 지점을 기준으로 나열
• space-between : 처음과 마지막 아이템을 양 끝에 붙이고 나머지 영역을
  공평하게 나눔
• space-around : 아이템들의 모든 여백을 공평하게 갖도록 함
  양끝 영역의 단위가 1이라면, 나머지 영역의 단위는 2
• space-evenly : start부터 첫 아이템의 간격 아이템 끼리의 간겨그 마지막 아이템 부터 end 까지의 모든 간격이 일정

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

#3. align-items

:교차축에 대해서 아이템을 어떻게 배치할 것인지?
-stretch (default) : container의 교차축을 채우기 위해 늘림

• 지금은 width, height가 지정되어 있어서 안됨
  -flex-start : 교차축에 대하여 시작점으로 정렬
  -flex-end : 교차축에 대하여 가운데 정렬
  -center : 교차축에 대하여 가운데 정렬
• baseline : 아이템을 텍스트의 베이스라인을 기준으로 정렬

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

#4. flex-wrap

: 줄바꿈 (개행) 처리
-> 컨테이너 (부모)가 한 줄에 아이템을 다 수용하지 못할 때 , 줄바꿈 관련 설정

• nowrap (default) : 줄바꿈 안함
• wrap : 줄바꿈 함
• wrap-reverse : 줄바꿈 하는데 아이템을 역순 배치

flex-wrap: nowrap;
flex-wrap: wrap; 
flex-wrap: wrap-reverse; 

#5. align-content

: 여러행에 대한 정렬

• (조건) flex-wrap : wrap / wrap-reverse 상태에서 아이템이 두 줄 이상일 때 교차축 방향 설정함

align-content: stretch; 
align-content: flex-start; 
align-content: flex-end; 
align-content: center; 
align-content: space-between; 
align-content: space-around; 
align-content: space-evenly; 
}

Item 속성

• order : 요소의 배치 순서를 제어하는 속성
  - 0 (default) : order를 설정하지 않은 아이템들이 먼저 순서대로 배치
  - 값 : 변경 : 숫자가 작은 값일수록 앞 배치 !
  
• align-self : Item이 "컨테이너의 교차축(세로)"에서 어떻게 배치할 것인지?
  - 각 항목에 대해 개별적으로 설정할 수 있다.
  - stretch (default) : container의 교차축을 채우기 위해 늘림
  - flex-start / flex-end / center 이하 동일
  
• flex-basis : 항목의 "기본 크기"를 지정하는데 사용
  - flex-grow / flex-shrink 와 결합하여 전체적인 크기 조정에 영향
  - *width와 height는 기본 크기를 설정하지만, Flexbox 레이아웃에서는 flex- basis가 우선 적용
  - 단위 ( px, rem, %) 사용가능
  - auto (default) : 컨텐츠 크기 기준
  - auto 일땐 width, height 우선 / 아닐때는 flex-basis 우선
  - 0 : 기본 크기를 0으로 설정 -> flex-grow, flex-shrink
  
• flex-grow : 항목이 남는 공간을 얼마나 확장할지 결정
  - 0 (default)
  
• flex-shrink : 항목이 부족한 공간에서 얼마나 축소될지 결정
  - 1 (defalut)
  - 요소의 너비의 영향을 많이 받기에 계산이 까다로움 (*활용도가 떨어짐)
  

• 단축 속성 *
  flex: flex-grow | flex-shrink | flex-basis
  증가너비 | 감소너비 | 기본너비
  
• 생략 *
  flex: 1 ==> flex-grow: 1; 나머지 기본 값.

.item1 {
  background-color: red;
  font-size: 10px;
  /* order: 5; */
  /* align-self: stretch; */
  /* flex-basis: 200px; */
  /* flex: 2 1 200px; */
  flex-grow: 1;
}

.item2 {
  background-color: orange;
  font-size: 15px;
  /* order: 3; */
  /* align-self: flex-start; */
  /* flex-basis: 150px; */
  flex-grow: 3;
}