Flexbox 바로 알기(3) - 화면 상 line을 넘어가는 요소 제어하기 :: flex-wrap, flex-flow

Flex-wrap

요소들 사이에 wrapping이 일어나지 않게 하려면 `flex-wrap`을 수정하자!

✅ wrapping : 요소들이 정해진 width를 넘어가서 다른 줄에 영향을 미치는 것

 

flex-wrap 속성의 기본 값 nowrap은 기본적으로 flexbox 내부의 모든 아이템이 한 줄에 있도록 한다.

⇒ 아이템들의 너비가 화면 전체 너비를 넘어가게 되면 임의로 width를 줄여서 크기 조정!

 

• flex-wrap: nowrap; ⇒ 모든 요소들을 한 줄에 있게 하기 위해 고정된 width 값이 변경된다.
• flex-wrap: wrap; ⇒ 요소들의 고정 width값이 유지되고, 화면이 작아질 경우 다음 줄로 넘어간다.
• flex-wrap: wrap-reverse; ⇒ 화면이 작아질 경우 요소들이 윗줄로 올라간다.

 

만약 속성값이 `wrap`인 경우,

요소들이 여러 줄에 걸쳐서 나올 때 `align-content` 속성으로 각 line 사이 간격을 설정할 수 있다.

⇒ https://mankkong.tistory.com/16

 

만약 속성값이 `nowrap`인 경우,

화면 크기를 줄일 때 `flex-shrink` 속성으로 각 box의 width 값이 변하는 비율을 조정할 수 있다.

⇒ https://mankkong.tistory.com/17

 

Flex-flow

`flex-flow: (direction) (wrap);`

 

flex-direction과 flex-wrap은 같이 쓰이는 경우가 많기 때문에 flex-flow로 한 번에 설정할 수도 있다!