Flex box

<준비과정>

 

① 선언

-display(boxtype 결정 프로퍼티) : flex;

-정렬하고자하는 요소를 감싸는 부모요소에 선언해야함

 

② 가로 or 세로 정렬 결정

-flex-direction : row / column / row-reverse / column-reverse;

(이것이 main axis, 이에 대한 수직이 cross axis가 되어 2개의 축이 생긴다.)

 

③ flex-wrap 

-한 줄에 다 넣을 것인지, 여러 줄에 걸쳐서 넣을 것인지

-nowrap(기본값) : 감싸지 않고 자식의 사이즈를 줄여서라도 한 줄에 다 정렬함

-wrap : 한 줄에 정렬하기에 공간이 부족할 경우 크기를 유지하고 여러 줄로 정렬함

 

 

***

1. main axis(정해진 방향)를 기준으로 정렬하고 싶을 때 : justify-content

 

-flex-start : 왼쪽 정렬

-center : 가운데 정렬

-flex-end : 오른쪽 정렬

-space-between : 요소 사이의 간격을 동일하게 맞춤 (justify-content에서만 사용)

-space-around : 요소의 주변을 동일한 간격으로 맞춤(?) (justify-content에서만 사용) 

 

 

 

 

 

2. cross axis(정해진 방향의 수직)를 기준으로 정렬할 때 : align-items, align-content

 

-justify-content와 값이 동일하다.

-space-between, space-around는 본래 쓸 수 없다.

 

만약 flex-wrap: wrap;으로 적용하고 align-items를 썼다면

다음 줄로 넘어간 요소가 첫 줄에 있는 요소들과 간격이 떨어지면서 다른 공간에 있게 되어 따로 움직이게 된다.

그래서 위 값을 적용할 수 없다는 것인데, 이를 가능케 하는 것이 align-content이다.

 

align-content는 위에서 말한 의도치않게 떨어져버린 요소들을 찰싹 붙어있게 함으로써 한 공간에 있도록 만든다.

한 공간에 들어와 붙어있게 되므로 함께 움직이게 된다.

 

 

잘 모르겠다면 flex-wrap: wrap; 일 때 둘 다를 적용해보면서 맞는 것을 쓰면 된다.

 

 

 

order : 요소에 순서를 지정해서 순서를 바꿀 수 있게 하는 프로퍼티

 

다음과 같이 사용한다.

order:2;

order:3;

order:1;

 

 

flex-grow : 공간이 남는 부분이 있을때 이 프로퍼티를 사용하면 그 공간에 딱 맞춰 커지게 된다.

-정수를 값으로 가지며 0은 차지하지 않음, 1은 차지함을 뜻함