@charset "UTF-8";
/* CSS Document */

#wrapper {max-width: 1200px; margin: 0 auto; font-size: 20px;}

ul {background-color: dodgerblue; margin: 20px 0; font-size: 50px;}
ul > li {width: 100px; height: 100px; border: 1px solid #000000; background-color: #f1f1f1; text-align: center;}
ul > li:nth-child(2) {font-size: 30px;}
ul > li:nth-child(4) {font-size: 70px;}

#flexbox-01 {display: flex;}   /* flex 혹은 inline-flex */
#flexbox-02 {display: flex; flex-direction: row;}    /* row(default), column, row-reverse, column-reverse */
#flexbox-03 {display: flex; flex-wrap: nowrap;}     /* nowrap(default), wrap, wrap-reverse */
#flexbox-04 {display: flex; flex-flow: row-reverse wrap;}
#flexbox-05 {display: flex; flex-direction: row; justify-content: space-between;}
/* flex-start(default), center, flex-end, space-around, space-between, space-evenly */
/* flex-direction이 column인 경우(높이를 늘려 공간이 확보되어야 함), y축 방향으로 동일하게 적용됨  */
#flexbox-06 {display: flex; height: 500px; align-items: baseline;}
#flexbox-06 > li {height: auto;}
/* normal(default / stretch와 동일), center, flex-start, flex-end, stretch, baseline  */
/* flex-direction이 column인 경우, x축 방향으로 동일하게 적용됨  */
#flexbox-07 {display: flex; height: 500px; flex-wrap: wrap; align-content: flex-start; gap: 50px 30px;}
#flexbox-07 > li {height: auto;}
/*  stretch(default), center, flex-start, flex-end, space-around, space-between, space-evenly */
/* align-items 과의 차이점 비교 --> 한 줄 내에서의 위치 조정   /  align-contents --> 전체 콘텐츠의 배치 조정 (반드시 wrap이 허용되어야 함)   /  gap: 20px 10px / column-gap, row-gap */
#flexbox-08 {display: flex; height: 500px; justify-content: center; align-items: center;}
/* align-content: center; flex-wrap: wrap;    ---->  align-content의 경우에는 wrap이 허용되어야 동작   */












