flex-wrap
-
플렉스 박스: 'flex-wrap '프론트엔드/CSS 2020. 8. 27. 01:06
'flex-wrap'이란? 플렉스 박스의 베이스라인에 더이상 여유가 없을 때 플렉스 아이템을 다음 줄로 넘길지 설정하는 것. 아래와 일반적으로 박스가 나열되있는 상황에서 브라우저 창의 크기를 줄이면 아래 사진처럼 변경된다. 하지만 'flex-wrap'을 속성값으로 줬을 때는 아래와 같이 줄을 넘겨서 정렬해준다. 'flex-wrap'의 속성값 'flex-wrap'의 속성은 다음과 같이 설정해준다. flex-wrap: 속성값; 속성값 설명 nowrap 기본 설정. 플렉스 아이템이 다음줄로 넘어가지 않음. 대신 아이템 너비를 줄여서 한 줄에 배치시킴. wrap 플렉스 공간에 여유가 없으면 다음 줄로 넘김. wrap-reverse 플렉스 공간에 여유가 없으면 다음줄로 넘김. 단 reverse의 경우 역으로 아래..