자주쓰는 flex 사용예시 / 정중앙으로 배치 / 양쪽끝으로 배치

1.정중앙으로 배치

로그인화면 사용예시

 

html

    <div class="wrap">
        <div class="loginBox">
            <h2>LOGIN</h2>
            <ul>
                <li>
                    <input type="text" placeholder="ID 입력하세요.">
                </li>
                <li>
                    <input type="password" placeholder="비밀번호를 입력하세요.">
                </li>
                <li>
                    <input type="submit" value="login">
                </li>
            </ul>
        </div>
    </div>

css

        * {margin: 0; padding: 0; box-sizing: border-box;}
        h2 {text-align: center; padding-bottom: 10px;}
        li {list-style: none; padding: 5px 0;}
        input {width: 100%; padding: 5px;}

        .wrap {
            width: 100%;
            background-color: cadetblue;

            /* 높이 값이 있어야 가운데 위치 가능 */
            height: 100vh;

            /* flex 가운데 중앙으로 배치 */
            display: flex; 
            justify-content: center; 
            align-items: center; 
        }

        .loginBox {width: 300px; padding: 30px; border: solid 1px #000; background-color: burlywood;}
        /* flex 부모에 자식이 하나 있어야 정중앙 배치 가능 */

 

2.양쪽끝으로 배치

상단 메뉴바 사용 예시

html

    <div class="wrap">
        <div class="topMeun">
            <!-- 양쪽 정령할 자식요소 2개 필요
            3개일경우 양쪽과 가운데로 정렬됨
            3개이상일경우 전체 너비에 맞쳐 자동으로 같은 간격으로 정렬됨
            -->
            <div class="toggleMenu">
                <img src="https://cdns.iconmonstr.com/wp-content/releases/preview/7.1.0/240/iconmonstr-line-three-horizontal-lined.png" width="35px">
            </div>
            <div class="login_group">
                <span>admin 님</span>
                <a href="#">로그아웃</a>
            </div>
        </div>
    </div>

css

        * {margin: 0; padding: 0; box-sizing: border-box;}
        .wrap {width: 100%; height: 100vh; background-color: #000;}

        .topMeun {
            /* 양쪽 끝으로 정렬 */
            display: flex; 
            align-items: center; 
            justify-content: space-between; 

            padding: 15px; 
            background-color: #fff;
        }

 

 

 

 

참고사이트: https://heropy.blog/2018/11/24/css-flexible-box/