[CSS]Flex

Jan 29, 2024

너비와 높이를 자유롭게 배치하고 변경할 수 있고 크기가 분명하지 않거나 반응형 일때도 쉬운 조절이 가능하다.


<!DOCTYPE html>
<html>

<head>
    <style>
        .main {
            display: flex;
            justify-content: center;
        }


        .flex-container {
            width: 80%;
            display: flex;
            background-color: DodgerBlue;
        }

        .flex-container>div {
            background-color: #f1f1f1;
            margin: 10px;
            padding: 20px;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="flex-container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
    </div>

</body>

</html>


flex-direction: row; // 디폴트 가로정렬


flex-direction: row;
justify-content: space-around;


.flex-container {
            width: 80%;
            height: 500px;
            display: flex;
            flex-direction: column;
            justify-content: end;
            background-color: DodgerBlue;
        }


flex-direction: row;


justify-content: space-between;


.flex-container>div {
            background-color: #f1f1f1;
            margin: 10px;
            padding: 20px;
            font-size: 30px;
            height: 50px;
        }


.flex-container>div {
            background-color: #f1f1f1;
            margin: 10px;
            padding: 20px;
            font-size: 30px;
            height: 50px;
            flex: 1;
        }


<!DOCTYPE html>
<html>

<head>
    <style>
        .main {
            display: flex;
            justify-content: center;
        }

        .flex-container {
            width: 80%;
            height: 500px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            background-color: DodgerBlue;
        }

        .flex-container>div {
            background-color: #f1f1f1;
            margin: 10px;
            padding: 20px;
            font-size: 30px;
            height: 50px;
        }

        .a {
            flex: 1;
        }

        .b {
            flex: 3;
        }

        .c {
            flex: 1;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="flex-container">
            <div class="a">1</div>
            <div class="b">2</div>
            <div class="c">3</div>
        </div>
    </div>

</body>

</html>

실습

💡

현재폴더에 있는 파일을 불러올때 ./를 쓴다.

구조부터 완성하기, 스타일은 link로 불러옴


<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <div class="main">
        <div class="main-body">
            <div class="main-body-section">
                <div class="section-title mb-10 mt-10">
                    Meet Guidebooks
                </div>
                <div class="section-subtitle mb-5">
                    Discover hundreds of local spots recommend by Airbnb hosts
                </div>
                <div class="section-img-box mb-10">
                    <div class="img-item">
                        <div class="item-name">San Francisco</div>
                        <img src="./images/napa.jpg">
                    </div>
                    <div class="img-item">
                        <div class="item-name">New York</div>
                        <img src="./images/london.jpg">
                    </div>
                    <div class="img-item">
                        <div class="item-name">London</div>
                        <img src="./images/new-york.jpg">
                    </div>
                </div>
                <div class="section-btn mb-10">
                    <button class="btn-detail">
                        See All Guidebooks
                    </button>
                </div>
            </div>
            <div class="main-body-section">
                <div class="section-title mb-10 mt-10">
                    Just for the weekend
                </div>
                <div class="section-subtitle mb-5">
                    Discover new, inspiring places close to home.
                </div>
                <div class="section-img-box mb-10">
                    <div class="img-item">
                        <div class="item-name">San Francisco</div>
                        <img src="./images/napa.jpg">
                    </div>
                    <div class="img-item">
                        <div class="item-name">New York</div>
                        <img src="./images/london.jpg">
                    </div>
                    <div class="img-item">
                        <div class="item-name">London</div>
                        <img src="./images/new-york.jpg">
                    </div>
                </div>
                <div class="section-btn mb-10">
                    <button class="btn-detail">
                        See All Guidebooks
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

css.style에 스타일 작성


.mb-10 {
    margin-bottom: 10px;
}

.mb-5 {
    margin-bottom: 5px;
}

.mt-10 {
    margin-top: 10px;
}

.main {
    background-color: rgb(232, 232, 232);
    display: flex;
    justify-content: center;
}

.main-body {
    width: 700px;
    text-align: center;
}

.section-title {
    color: rgb(238, 147, 147);
    font-size: 20px;
    font-weight: 700;
}

.section-subtitle {
    font-size: 12px;
}

.section-img-box {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-column-gap: 10px;
}

.img-item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item-name {
    position: absolute;
    color: white;
}

.img-item>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.btn-detail {
    background-color: rgb(235, 130, 130);
    border-radius: 6px;
    color: white;
    height: 30px;
    width: 200px;
}

ctrl+shift+f

See more posts

[CSS]Flex

More articles

인텔리제이로 웹 구현시 한글이 깨질때

[실습]Airbnb 만들어보기

[CSS]Grid

웹 디자인 만들기