flex-wrap : wrap | warp-reverse; 배치 방법
<div id="con1">
<div class="item item1">item1</div>
<div class="item item2">item2</div>
<div class="item item3">item3</div>
<div class="item item4">item4</div>
<div class="item item5">item5</div>
<div class="item item6">item6</div>
<div class="item item7">item7</div>
<div class="item item8">item8</div>
<div class="item item9">item9</div>
<div class="item item1">item1</div>
<div class="item item2">item2</div>
<div class="item item3">item3</div>
<div class="item item4">item4</div>
<div class="item item5">item5</div>
<div class="item item6">item6</div>
<div class="item item7">item7</div>
<div class="item item8">item8</div>
<div class="item item9">item9</div>
</div>
#con1 {
width: 100%;
height: 75vh;
/* 현재 화면의 75% 만큼의 비율 */
/*
vh : Viewport Height(현재 화면 높이)
Viewport : 브라우저 또는 기기화면
*/
display: flex;
flex-wrap: wrap;
/* flex-wrap: wrap-reverse; */
/* align-items: center; */
/*****************/
/* align-content */
/*****************/
/*
cross axis 방향으로
item이 포장된(wrap)라인을 정렬하는 방법
<조건 : flex-wrap[속성이 wrap 또는 wrap-reverse 일 때만 사용 가능>
속성값 : justify-content의 속성 값을 전부 사용할 수 있다.
*/
/* cross axis 방향 시작 지점으로 포장된 item들을 정렬 */
/* align-content: flex-start; */
/* cross axis 방향 끝 지점으로 포장된 item들을 정렬 */
/* align-content: flex-end; */
/* cross axis 방향 가운데로 포장된 item들을 정렬 */
/* align-content: center; */
/* cross axis 방향으로 포장된 item들 양 쪽으로 일정한 공간을 나눠주어 정렬 */
/* align-content: space-around; */
/* cross axis 방향으로 포장된 item들이 동일한 크기의 공간을 나누어 정렬 */
/* align-content: space-evenly; */
/* cross axis 방향으로 포장된 item들이 동일한 크기의 공간을 나누어 정렬
단, 처음ㅁ과 끝은 flex-container에 붙어있게 함.
*/
/* align-content: space-between; */
}