/* FLEX 란 레이아웃 배치 전용 기능
    - "내가 어떤 요소를 옮기고 싶다" => 그 요소가 'item'
    - 위에서 정한 item 부모 => 'container'
    -
*/
.container{
    background-color: lightgray;
    height: 500px;

    /* container에 작성해야 하는 스타일 속성 */

    /* 1. flex설정 */
    display: flex;
    /* 2. 배치방향 설정
        -row : 메인축이 가로
        -column : 메인축이 세로
        -row-reverse, column-reverse
    */
    flex-direction: row;

    /* 3~4) left, right, center, space-between, space-around, space-evenly */
    /* 3. 메인축 정렬 : justify-content */
    justify-content: space-around;
    /* 4. 서브축 정렬 : align-items */
    align-items: center;
    /* 5. 줄넘김 처리 : flex-wrap */
    flex-wrap: wrap;
}
.item{
    background-color: skyblue;
    width: 100px;
    height: 100px;
    border: 1px solid gray;
    /* 내가 움직이고 싶은건 'span태그' => 그 부모인 div가 container*/
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.section1{
    flex-basis: 10%;
}

.section2{
    flex-basis: 70%;
}
.section3{
    flex-basis: 15%;
}