flex ( wrap, nowrap, reverse, align-content )

wrap

각 box의 width를 200px로 주었지만 display: flex라고 하면 한 줄에 모든 요소들을 다 집어 넣으려고하는 습성이 있다. 만약 브라우저의 사이즈를 줄이게 되면 어떻게 될까? 어떻게든 브라우저의 width에 집어 넣기 위해 우리가 기존에 주었던 200px을 무시할 수 밖에 없다. 아래의 그림을 보면 83.34px로 줄어든 것을 볼 수 있다. 이를 온전히 유지하기 위해선flex-wrap : wrap을 주면 해결이 된다. default는 flex-wrap : nowrap이다.

 

 

wrapper에 flex-wrap : wrap을 주면 아래와 같이 최대한 item의 너비를 지켜주고 초과되는 부분은 아래로 내려가게 한다.

 

reverse

flex-direction : row-reverse를 주면 오른쪽 부터 정렬이 된다.  

마찬가지로 flex-direction : column-reverse를 주면 위가아닌 아래서 부터 정렬이 된다.

flex-direction : row-reverse일때 

flex-wrap : wrap을 주면 당연하게도 아래와 같은 그림이 된다. 근데 wrap에도 reverse가 있다.

 

아래의 그림은 flex-direction : row, flex-wrap: wrap-reverse이다.

아래의 그림은 flex-direction : row-reverse, flex-wrap: wrap-reverse이다.

 

align-content

위와 같이 flexbox의 children들이 여러 줄 로 나뉘게 될 경우에 사용할 수 있는 것중 하나가 align-content이다.

지금까지는 wrapper의 height를 주지 않아 item들의 height로 적용이 되었다. 이번에는 wrapper에 height를 주고 border를 입혀서 어떻게 기본정렬이 되는지 확인해보자.

wrapper의 height를 주니 이제 wrapper의 사이에 간격이 넓어진 것을 확인할 수가 있다. 우리가 전에 사용 했던 

align-items : center를 사용하면 어떻게 될까?  아까처럼 1~6 item들이 빈틈없이 정중앙에 모이게 될까?? 

 

한번 눈으로 확인해보자. 위의 배치를 잘보면 1 2 3 4는 wrapper에 딱 붙어있는 것을 확인할 수 있다.

하지만 align-items : center를 주면 한 가운데로 모일 줄 알았는데 약간 거리가 생기것 이외엔 딱히 없다.

align-items는 각 wrap옵션으로 인해서 여러줄로 나뉘게된 각 줄마다 마다에게 주는 옵션인 것이다.

우리는 전에 한 줄만 있었기 때문에 align-items를 사용하였을 때 wrapper의 정중앙에 왔던 것이다.

align-items의 기본 옵션은 flex-start이어서 각 줄의 맨 위에 위치하게 된 것이다.

그럼 align-items : flex-end를 주면 각 줄 마다 마다의 맨 밑에 위치하게 될 것이다.

 

보이지는 않지만 1 2 3 4 item은 자신들이 위치한 줄에 맨 마지막에 위치한 것을 알 수 있다. 

 

그럼 아까의 궁금중 모든 item들을 한가운데 모을 수 있는 방법은 뭐가 있을까?? 그럴 때 사용할 수 있는 것이 바로 

align-content이다. align-content : center를 주면 비로소 아래와 같이 한 가운데에 위치하는 것을 볼 수 있다.

align-items는 각 wrap마다 마다의 cross-axis에게 옵션을 주는 것이라면
align-content는 전체 wrapper의 cross-axis에게 옵션을 주는 것 같다.