(css) flex-wrap

flex-wrap: no-wrap | wrap | wrap-reverse

플렉스 항목을 한 줄 또는 여러 줄로 배치하기

속성 값	설명
no-wrap	플렉스 항목들을 한 줄에 표시합니다. 기본 값
wrap	플렉스 항목을 여러 줄에 표시
wrap-reverse	플렉스 항목을 여러 줄에 표시하되 기존 방향과 반대로 배치

#container {
    width: 500px;
    height: 300px;
    margin: 0 auto;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    border: 2px solid black;
}