CSS. flex-wrap이란?

개요

CSS는 알면 알수록 시간 절약이 가능하고, 모르면 모를수록 더 고생을 하는 분야인 거 같다

요즈음 자꾸 생소한 개념이 튀어나온다

오늘은 그 중 하나인 flex-wrap에 대해 알아보겠다

 

개념

flex-wrap이란, 어떤 방식으로 flex 배치를 할 것인지를 알 수 있다

모든 것이 한 줄에 배치될건지, 아니면 여러 행으로 나눠서 배치하게 될건지 등을 미리 설정할 수 있다

 

기본 설정 값 : flex-wrap: nowrap;

부모 요소를 벗어나더라도 한 줄에 배치한다

 

flex-wrap: wrap;

flex-item 요소들이 내부 로직에 의해 분할되어 여러 행에 걸쳐서 배치된다

 

flex-wrap: wrap-reverse;

wrap속성과 동일하나 순서가 반대로 된다

 

나의 경우

flex-wrap: wrap을 써서 대충 비율에 맞게 알아서 딱 분할될 수 있도록 쓴다

가끔 원하는 바를 너무나도 잘 알아 주는 것 같으면서도

가끔은 뭘 해도 이상하게 배치 된다

 

부들부들