[CSS] flex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /*
        flex : 아이템 간의 공간 배분 및 정렬
                container + item
        -> container : flex 영향을 받는 전체 공간
        -> item : 설정된 속성에 따라 배치되는 것 

        메인축(main axis) : 아이템이 배치되는 축의 방향
        교차축(cross axis) : 메인축과 수직이 되는 방향
         */
        .container {
            background-color: beige;
            display: flex;
            flex-direction: row;
            /*
            flex direction : 아이템들이 배치되는 축의 방향을 결정하는 속성
            -> row : 가로 방향 배치, 기본값
            -> row-reverse : 가로 역순 배치
            -> column : 세로 배치
            -> column-reverse : 세로 역순 배치 
             */

             flex-wrap: wrap;
             /* 
             flex-wrap : 아이템들의 줄바꿈을 결정하는 속성
             -> nowrap : 줄바꿈 X, 기본값
             -> wrap : 줄바꿈ㅇ
             -> wrap-reverse : 줄바꿈O, 역순 배치
             */

             flex-flow : row-wrap;
             /* 
             flex-flow : flex-direction + flex-wrap 한 번에 설정하는 속성
             */

             justify-content: space-evenly;
             /* 
             justify-content : 메인 축 방향 아이템 정렬 지정
             -> flex-start : 시작점 정렬, 기본값
             -> flex-end : 끝점 정렬
             -> center : 가운데 정렬
             -> space-between : 아이템 사이 균일한 여백, 양끝은 여백X
             -> space-around : 모든 아이템 좌우 여백이 균일
             -> space-evenly : 아이템 사이와 양 끝 여백이 모두 균일
             */
        }
        .item {
            background-color: lightblue;
            width: 200px;
            height: 200px;
            font-size: 3rem;
            font-weight: bold;

            display: flex;
            justify-content: center;

            align-items: center;
            /* align-items : 수직축 방향 아이템 정렬 지정 */
        }
    </style>
</head>
<body>
    <!-- div.container>div.item{box$}*6 -->
    <div class="container">
        <div class="item">box1</div>
        <div class="item">box2</div>
        <div class="item">box3</div>
        <div class="item">box4</div>
        <div class="item">box5</div>
        <div class="item">box6</div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 
        headerWrap div를 flex container로
            => imgWrap과 ul 가로 배치
        */
        .headerWrap {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding: 0 10%;
        }

        /* imgWrap div를 flex contaienr로 
            => img 수직 방향 가운데 배치
        */
        .imgWrap {
            flex-direction: row;
        }
        ul {
            list-style: none;
            display: flex;
            justify-content: space-between;
            font-size: 1.25rem;
            
        }

        li {
            display: flex;
            margin-right: 40px;
            font-weight: bold;
            align-items: center;
            justify-content: center;
        }
        
        .a {
            background-color: steelblue;
            color: white;
            border-radius: 22%;
            width: 100px;
            height: 45px;
            text-align: center;
            align-items: center;

        }
        .a:hover {
            background-color: black;
        }
        
        .b:hover {
            text-decoration: underline;
            color: rgb(85, 202, 248);
        }

        
    </style>
</head>
<body>
    <div class="headerWrap">
        <div class="imgWrap">
            <img src="https://smartceleb.mycafe24.com/wp-content/uploads/2022/01/smart_logo.png" alt="">

        </div>
        <ul>
            <li class="b">취업연계과정</li>
            <li class="b">취업LIVE</li>
            <li class="b">프로젝트</li>
            <li class="b">후기모음</li>
            <li class="b">기관소개</li>
            <li class="b">문의하기</li>
            <li class="a">수강신청</li>
        </ul>
    </div>
</body>
</html>