[CSS] CSS flex 에서 flex-wrap 속성

임홍원·2023년 10월 19일
post-thumbnail

개인 과제를 진행하던 중 요소가 화면을 벗어나는 문제점이 있었고,
flex-wrap을 통해 해결하였다. 이를 기억하기 위해 flex-wrap을 정리하려고한다.

flex-wrap

CSS flex-wrap property는 flex-item 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성이다.


flex-wrap을 적용하지 않았을 경우에는 요소가 화면을 넘어가 스크롤을 옆으로 해야하는 불편함이 있었다.


flex-wrap 적용 후 스크롤을 밑으로 넘길 수 있게 적용이 되었다.

flex-wrap: wrap-reverse를 적용할 경우 맨 밑에있던 요소가 위로 올라와 역순으로 배치된다.

profile
Frontend Developer

0개의 댓글