css기초-flex 하위정렬속성 flex-wrap과 flow

flex-wrap

🔍자식을 감싸는 속성

flex를 적용하게 되면 자식 요소들이 부모 넓이보다 넓을 때 자동으로 찌그러든다.
이때 만약 자식의 넓이와 높이를 그대로 유지하고 싶다면 flex-wrap을 사용한다.

-flex-wrap : nowrap;
:기본값으로 모든 자식 요소들을 한 줄에 걸쳐서 부모박스에 맞춤.
-flex-wrap : wrap;
:요소들을 여러 줄에 걸쳐 정렬하고, 자식의 넓이 높이를 유지함.
-flex-wrap : wrap-reverse;
:요소들을 여러 줄에 걸쳐 반대로 정렬하고, 자식의 넓이 높이를 유지함.

flex-flow

🔍나열속성 + 감싸기 속성

flex-direction(나열속성) + flex-wrap(감싸기속성)을 한꺼번에 선언할때 사용함.
두 속성의 조합은 자주 사용되기 때문에 한번에 선언하고 싶을 때 이 속성을 사용할 수 있다.
두 속성의 속성값을 공백으로 구분하여 한 번에 쓴다.

예시)
-flex-flow : row wrap;
-flex-flow : column wrap;
-flex-flow : column-reverse wrap-reverse;