13. 플렉스(Flex)

서현우·2022년 3월 15일
html
0

HTML

목록 보기
6/20

Flex란?

정렬을 위한 도구. 내부 아이템 배치를 쉽게 할 수 있도록 도와준다.

  • CSS3 의 최신 레이아웃 모델.

  • Display 속성을 사용함.

  • float 를 대체하며 더 효율적으로 사용.

  • 가로 세로로 아이템들을 정렬.

  • 아이템들의 순서나 비율등을 쉽게 적용.

Flexbox 연습

<!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>플렉스</title>
    <style>
        html,
        body {
            background-color: #ffeead;
            margin: 10px;
        }

        .container div {
            padding: 10px;
            text-align: center;
            /* 2em은 원래 폰트 사이즈 2배 */
            font-size: 2em;
            color: #ffeead;
            min-width: 200px;
        }

        .home {
            background-color: dodgerblue;
            /* margin-right: auto; */
            flex: 1;
            order: 2;
        }

        .search {
            background-color: coral;
            margin-right: auto;
            flex: 1;
            order: 3;
        }

        .logout {
            background-color: yellowgreen;
            flex: 1;
            order: 1;

        }

        .container {
            border: 5px solid #ffcc5c;
            
            /* 부모태그에서 display:flex 사용 */
            display: flex;
            
            /* 가로 정렬 방법 */
            justify-content: flex-start;
            
            /* 길이가 짤리면 아래로 내림 */
            flex-wrap: wrap;
        }
    </style>
</head>

<body>
    <nav class="container">
        <div class="home">Home</div>
        <div class="search">Search</div>
        <div class="logout">Logout</div>
    </nav>
</body>

</html>

예제) 동물 사진첩 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>동물앨범</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;

        }

        img {
            max-width: 300px;
            margin-bottom: 15px;
        }
    </style>
</head>

<body>
    <h1>야생의 동물들</h1>
    <div class="container">
        <img src="https://source.unsplash.com/800x450/?animal/1">
        <img src="https://source.unsplash.com/800x450/?animal/2">
        <img src="https://source.unsplash.com/800x450/?animal/3">
        <img src="https://source.unsplash.com/800x450/?animal/4">
        <img src="https://source.unsplash.com/800x450/?animal/5">
        <img src="https://source.unsplash.com/800x450/?animal/6">
        <img src="https://source.unsplash.com/800x450/?animal/7">
        <img src="https://source.unsplash.com/800x450/?animal/8">
        <img src="https://source.unsplash.com/800x450/?animal/9">
        <img src="https://source.unsplash.com/800x450/?animal/10">
        <img src="https://source.unsplash.com/800x450/?animal/11">
        <img src="https://source.unsplash.com/800x450/?animal/12">
        <img src="https://source.unsplash.com/800x450/?animal/13">


    </div>
</body>

</html>

Flexbox 게임

http://flexboxfroggy.com/#ko

Flexbox 실습

<!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>플렉스실습</title>
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
        }

        input {
            font-size: 14px;
            font-family: Helvetica, sans-serif;
        }

        body {
            background-color: #BBB;
            font-family: Helvetica, sans-serif;
            padding-bottom: 100px;
        }

        h2,
        h3 {
            margin: 0 0 .75em 0;
        }

        /* 첫번째 css */
        .container {
            max-width: 750px;
            margin: 20px auto 0 auto;
            padding: 30px;
            background-color: #FFF;
        }

        .form-row {
            padding: 10px 0;
            display: flex;
        }

        .form-row label {
            padding-right: 10px;
        }

        /* input과 label flex 1:1 */
        .form-row input,
        .form-row label {
            flex: 1;
        }

        /* 2번째 css */
        .column-layout {
            max-width: 1300px;
            background-color: #FFF;
            margin: 40px auto 0 auto;
            line-height: 1.65;
            padding: 20px 50px;
            display: flex;
        }

        /* flex : 비율, order : 순서 */
        .main-column {
            flex: 5;
            order: 2;
        }

        .sidebar-one {
            flex: 1;
            order: 1;
        }

        .sidebar-two {
            flex: 1;
            order: 3;
        }

        /* 3번째 css */
        .call-outs-container {
            max-width: 1400px;
            margin: 40px auto 0 auto;
        }

        .call-out {
            padding: 20px;
            box-sizing: border-box;
            margin-bottom: 20px;
            /* 비율대신 퍼센트나 px로 아이템의 가로사이즈 */
            flex-basis: 30%;
        }

        @media (min-width: 900px) {
            .call-outs-container {
                /* 화면 사이즈 900 이상만 flex가 적용되도록 */
                /* 컨테이너에서 flex와 가로정렬을 제거하고 여기에 적용한다 */
                display: flex;
                justify-content: space-between;
            }
        }

        /* 같은 클래스 call-out 중에 : nth-child(몇번째) */
        .call-out:nth-child(1) {
            background-color: #c0dbe2;
        }

        .call-out:nth-child(2) {
            background-color: #cdf1c3;
        }

        .call-out:nth-child(3) {
            background-color: #ccb9da;
        }

        /* 4번째 css */
        .fixed-size-container {
            max-width: 1400px;
            margin: 40px auto 0 auto;
            background-color: #FFF;
            padding-top: 50px;
            padding-bottom: 30px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            /* 사각형들이 화면이 줄어들면 아래로 내려갈수 있도록 */
            flex-wrap: wrap;
        }

        .fixed-size {
            width: 150px;
            height: 100px;
            background-color: #990b47;
            color: #FFF;
            line-height: 100px;
            text-align: center;
            font-weight: bold;
            font-size: 60px;
            margin-bottom: 20px;
        }

        /* 5번째 css */
        .banner {
            height: 400px;
            max-width: 700px;
            margin: 40px auto 40px auto;
            background-color: #2a2a2a;
            /* Center 글자를 사각형 정 중앙에 오도록 한다. */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .center-me {
            color: #FFF;
            font-size: 50px;
            margin: auto;
        }

        /* 6번째 css */
        .equal-height-container {
            max-width: 900px;
            margin: 0 auto;
            display: flex;
        }

        /* .first, .second 플렉스 비율 1:1로 하고 */
        .first {
            background-color: #FFF;
            padding: 20px;
            flex: 1;
        }

        /* second를 다시 플렉스를 잡아서 .second-a,b를 또 플렉스로 조정 */
        .second {
            background-color: yellow;
            flex: 1;
            display: flex;
            /* 플렉스의 방향을 위아래로 */
            flex-direction: column;
        }

        /* .second-a, b를 플렉스로 1:1 */
        .second-a {
            background-color: #c0dbe2;
            flex: 1;
        }

        .second-b {
            background-color: #cdf1c3;
            flex: 1;
        }
    </style>
</head>

<body>
    <!-- 예제 1 -->
    <div class="container">
        <form>
            <div class="form-row">
                <label for="name">Name:</label>
                <input type="text" id="name">
            </div>
            <div class="form-row">
                <label for="favColor">Favorite Color:</label>
                <input type="text" id="favColor">
            </div>
        </form>
    </div>
    <!-- 예제 2 -->
    <div class="column-layout">
        <div class="main-column">
            <h2>Main Column</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam voluptatibus soluta, consequuntur,
                reiciendis debitis omnis fugiat libero pariatur amet laudantium minima consectetur tenetur. Repudiandae,
                autem, voluptate modi deleniti sequi voluptatum!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi earum fugit veniam amet quae sint vitae
                numquam dolore sunt quod a odio officia voluptate doloribus, at. Cum quasi mollitia eaque. Voluptatibus
                soluta, consequuntur, reiciendis debitis omnis fugiat libero pariatur amet laudantium.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam voluptatibus soluta, consequuntur,
                reiciendis debitis omnis fugiat libero pariatur amet laudantium minima consectetur tenetur. Repudiandae,
                autem, voluptate modi deleniti sequi voluptatum!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi earum fugit veniam amet quae sint vitae
                numquam dolore sunt quod a odio officia voluptate doloribus, at. Cum quasi mollitia eaque.</p>
        </div>

        <div class="sidebar-one">
            <h3>Sidebar One</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum modi nisi tenetur sint dignissimos
                nulla, blanditiis nesciunt.</p>
        </div>

        <div class="sidebar-two">
            <h3>Sidebar Two</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum modi nisi tenetur sint dignissimos
                nulla, blanditiis nesciunt.</p>
        </div>
    </div>
    <!-- 예제 3 -->
    <div class="call-outs-container">
        <div class="call-out">
            <h4>Feature 1</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam obcaecati vel, placeat numquam omnis
                sit consectetur nobis molestias! Explicabo deserunt. Consectetur adipisicing elit. Quibusdam obcaecati
                vel, placeat numquam placeat numquam omnis sit consectetur.</p>
        </div>

        <div class="call-out">
            <h4>Feature 2</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam obcaecati vel, placeat numquam omnis
                sit consectetur nobis molestias! Explicabo deserunt placeat numquam omnis.</p>
        </div>

        <div class="call-out">
            <h4>Feature 3</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam obcaecati vel, placeat numquam omnis
                sit.</p>
        </div>
    </div>
    <!-- 예제 4 -->
    <div class="fixed-size-container">
        <div class="fixed-size">1</div>
        <div class="fixed-size">2</div>
        <div class="fixed-size">3</div>
        <div class="fixed-size">4</div>
        <div class="fixed-size">5</div>
    </div>
    <!-- 예제 5 -->
    <div class="banner">
        <div class="center-me">가운데</div>
    </div>
    <!-- 예제 6 -->
    <div class="equal-height-container">
        <div class="first">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam quasi similique amet voluptatem molestiae
                nostrum ab nesciunt blanditiis repellendus quos, sequi sunt, dolorem quis facilis mollitia nemo modi
                doloribus
                quo.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quisquam, veritatis ducimus, vero
                magnam hic
                quia pariatur asperiores laudantium quod nobis perspiciatis, expedita quo reprehenderit quasi iusto
                ullam error
                reiciendis.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam quasi similique amet voluptatem molestiae
                nostrum ab nesciunt blanditiis repellendus quos, sequi sunt, dolorem quis facilis mollitia nemo modi
                doloribus
                quo.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quisquam, veritatis ducimus, vero
                magnam hic
                quia pariatur asperiores laudantium quod nobis perspiciatis, expedita quo reprehenderit quasi iusto
                ullam error
                reiciendis.</p>
        </div>

        <div class="second">
            <div class="second-a">A</div>
            <div class="second-b">B</div>
        </div>
    </div>
</body>

</html>
profile
서현우
안녕하세요!!
이전 포스트

12. 미디어 쿼리

다음 포스트

14. 특수 효과

0개의 댓글