[CSS] flex-wrap

개념

• 자식 요소들(flex items)의 총 너비가 부모 요소(flexbox)를 초과할 때 줄바꿈을 어떻게 처리할 건지 다루는 속성
• 부모 요소(flexbox)에 적용하는 속성

 

종류

nowrap / wrap / wrap-reverse

• nowrap: 줄바꿈을 하지 않고, 자식 요소들을 한 줄로 표시 -> 부모 요소를 초과하게 된다.
• wrap: 줄바꿈하여 표시
• wrap-reverse: 줄바꿈하되 자식 요소들을(flex items) 역순으로 표시

 

암기법

• wrap이 '감싸다' 라는 뜻이니까, 밖으로 삐져나가지 않도록 부모 요소가 자식 요소들을 감싸서 줄바꿈을 한다고 외워야겠다...😅