3. Flex wrap

1. flex-wrap의 개념

flex-wrap은 Flexbox(플렉스박스) 레이아웃에서 아이템들이 한 줄에 다 들어가지 않을 때 줄을 바꿀지, 아니면 강제로 한 줄에 유지할지를 결정하는 속성입니다.

즉, 플렉스 컨테이너의 너비가 좁아졌을 때

• 아이템이 자동으로 줄바꿈되어 다음 줄로 이동할지,
• 아니면 한 줄 안에서 크기가 줄어들며 억지로 들어갈지
  를 설정하는 역할을 합니다.

 

2. 예시

2-1 flex-wrap 이전

 

• 문단이 짤린다
• 모든 내용이 표시되지 않고 스크롤바가 생긴다

 

2-2 flex-wrap 사용

 

• 내용이 줄바꿈이 된다.

 

설정	시각적 구조	설명
nowrap	→ [1][2][3][4][5]	한 줄에 강제로 배치
wrap	→ [1][2][3] → [4][5]	공간 부족 시 아래로 줄바꿈
wrap-reverse	↑ [4][5] ↑ [1][2][3]	줄바꿈이 생겨도 위로 쌓임