css flex의 flex-wrap옵션에 대해

Posted by negabaro kim on Friday, March 12, 2021 Tags: css/flex   1 minute read

flex-wrap

Flex Items의 여러 줄 묶음(줄 바꿈) 설정

디폴트값은 한줄에 모두 표시하므로 크기를 벗어날시 화면을 삐져나올 수 있다는점을 인지할것!

nowrap(★★★)

디폴트값

모든 Itmes를 여러 줄로 묶지 않음(한 줄에 표시)

image

wrap(★★★)

Items를 여러 줄로 묶음

아이템들 사이에 더이상 공간이 없을때 행을 나눠주게 됨

image

wrap-reverse

wrap아이템 반대로

image


참고

MDN

Github

헤로피 CSS Flex완벽 가이드