우리는 오늘 또 다른 기능을 배워볼 것이다. flexbox는 기본적으로 display:flex를 했을때 모든 속성이 한 줄 안에 들어오도록 할 것이다. 그러나 우리는 줄바꿈을 하고 싶을 때가 있다. 그럴 땐 어떻게 해야할까?

flex-wrap : nowrap;

이렇게 되면 줄바꿈을 할 수가 있다. defalut 값은 wrap 값이다.

스크린샷 2022-06-29 오후 2.15.56.png

그러나 이 사이에 생기는 간격.. 너무 불편하다. 없애거나 조절할 순 없을까?

align-content : flex-start;

이렇게 하면 간격을 아예 없앨 수 있다. align-content는 cross axis에 있는 축이다. 그렇기 때문에 위아래로 간격을 조정할 수 있다.

또한 이 요소들의 순서를 뒤집어 나열하고 싶을 땐

flex-direction : row-reverse;

를하면 순서가 뒤집히게 된다.