Flex Containers 속성 - flex-wrap

flex-wrap

Items의 여러 줄 묶음(줄 바꿈)을 설정한다.

값	의미	기본값
nowrap	모든 Items를 여러 줄로 묶지 않음(한 줄에 표시)	nowrap
wrap	Items를 여러 줄로 묶음
wrap-reverse	Items를 wrap의 역 방향으로 여러 줄 묶음

flex-wrap: 여러줄묶음;

기본적으로 Items는 한 줄에서만 표시되고 줄 바꿈 되지 않는다. (요소가 넘치더라도 무조건 한줄이다.)
이는 지정된 크기(주 축에 따라 width나 height)를 무시하고 한 줄 안에서만 가변한다.
Items를 줄 바꿈 하려면 값으로 wrap을 사용해야 한다.

 

줄을 묶는 3가지 방법

 

 

.container{
  border: 4px solid;
  display: flex;
  flex-wrap: wrap;
}

.container .items{
  width: 150px;
  height: 100px;
  background: tomato;
  border: 4px dashed red;
}

display: flex만 사용하게 된다면, 화면이 줄어들때 container클래스 안에 있는 items클래스들도 같이 줄어들고 다음줄로 재정렬 되지 않는다.

다음과 같이 CSS에 선언하게 된다면, 화면이 줄어든다면 container클래스 안에 있는 items클래스들은 다음줄로 재 정렬이 되는걸 확인 할 수 있다.