Flexbox

flexbox가 나오기 전, 레이아웃 작업을 할 땐 position, float, table 등을 이용해 레이아웃을 잡았다. 하지만 위의 요소들로 작업할 땐 일일히 px값을 체크하며 레이아웃을 지정해줘야 했다. 편한 레이아웃 작업이 필요했다.
그 때 등장한 것이 바로 flexbox라는 요소이다.

Flexbox의 특징 2가지

1. flex container와 flex item의 관계

   container에 속성값을 주면 하위 개체인 item에 속성이 적용된다. item이 container에서 벗어나면 속성은 적용되지 않는다
   
   

2. flexbox에는 중심축(main-axis)과 보조축(cross-axis)이 있다.
   

가로정렬인 row와 세로정렬 column이 있다.
flex-direction으로 축을 설정할 수 있는데
축 방향을 설정해주지 않으면 기본값인 row가 적용되어
가로축이 main axis, 세로축이 cross-axis가 된다.
(column을 적용하면 반대로 세로축이 main axis, 가로축이 cross-axis가 된다.)

Flex 속성

1. flex-wrap : 한 줄에 가득 차면 다음 줄로 넘길건지 말건지 결정

.parent{
  flex-wrap: nowrap;  - 공간 탈출해버림,,
  flex-wrap: wrap;   - 아래로 순서대로 내려준다
  flex-wrap: wrap-reverse;  - 위로 순서대로 올려준다
}

2. justify-content : 중심축에서 어떻게 배치할건가

.parent{
justify-content : flex-start; 

justify-content : flex-end;

justify-content : center;

space-around — 동일한 간격으로 배치
처음과 마지막 요소에도 여백이 생긴다

space-between — 동일한 간격으로 배치
아이템 사이 여백 있으나 첫 요소 앞과 맨 뒤 요소 뒤에 여백이 없다
}

3. align-items : 보조축에서 어떻게 배치할건가

.parent {
	align-items: stretch;
	align-items: flex-start;
	align-items: flex-end;
	align-items: center;
	align-items: baseline;
}

4. flex-grow, flex-shrink, flex-basis
   : container의 사이즈에 따라 item들이 얼마나 늘어나고
   줄어들건지 정리하는 녀석(container가 아닌 item에 적용한다)

보통 3가지를 축약해 한 번에 사용한다.

.parent {
        display: flex;
      }

.item1 {
        flex: 1 1 auto; //순서대로 grow, shrink, basis
      }

.item2 {
        flex: 1 1 auto;
      }

5. align-self : 특정 아이템의 정렬을 따로 정하고 싶을 때

align-self: stretch;
align-self: center;
align-self: start;
align-self: end;

Reference
드림코딩 by 엘리
MDN