CSS 속성 다루기

플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기

플렉스 박스 레이아웃은 플렉서블한 박스 레이아웃을 의미한다.

플렉스 박스 레이아웃의 기본 속성

display 속성

플렉스 박스 레이아웃은 display 속성값을 flex나 inline-flex로 지정하는 것에서 시작한다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>hi~</title>
        <link rel="stylesheet" href="flex-basic.css">
        <style>
            .flex-container{
                width: 300px;
                height: 200px;
                background-color: #c4c4c4;
                border: 1px solid black;
                display:flex;
            }
            .flex-item{
                color: white;
                background-color: #ff5252;
            }
            .flex-item:nth-child(2n){
                background-color: #bf5e5e;
            }
        </style>
    </head>
    <body>
        <div class="flex-container">
            <div class="flex-item">item-1</div>
            <div class="flex-item">item-2</div>
            <div class="flex-item">item-3</div>
        </div>
    </body>
</html>

Untitled

flex-direction 속성

플렉스 박스 레이아웃의 주축 방향을 결정한다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>hi~</title>
        <link rel="stylesheet" href="flex-basic.css">
        <style>
            .flex-container{
                width: 300px;
                height: 200px;
                background-color: #c4c4c4;
                border: 1px solid black;
                display:flex;
                flex-direction:column; /* row, row-reverse, column, column-reverse */
            }
            .flex-item{
                color: white;
                background-color: #ff5252;
            }
            .flex-item:nth-child(2n){
                background-color: #bf5e5e;
            }
        </style>
    </head>
    <body>
        <div class="flex-container">
            <div class="flex-item">item-1</div>
            <div class="flex-item">item-2</div>
            <div class="flex-item">item-3</div>
        </div>
    </body>
</html>

Untitled

flex-wrap 속성

flex-wrap 속성은 플렉스 아이템이 플렉스 컴테이너 영역을 벗어날 때 어떻게 처리할지를 결정한다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>hi~</title>
        <link rel="stylesheet" href="flex-basic.css">
        <style>
            .flex-container{
                width: 300px;
                height: 200px;
                background-color: #c4c4c4;
                border: 1px solid black;
                display: flex;
                flex-direction: row; /* row, row-reverse, column, column-reverse */
                flex-wrap: wrap;
            }
            .flex-item{
                color: white;
                background-color: #ff5252;
            }
            .flex-item:nth-child(2n){
                background-color: #bf5e5e;
            }
        </style>
    </head>
    <body>
        <div class="flex-container">
            <div class="flex-item">item-1</div>
            <div class="flex-item">item-2</div>
            <div class="flex-item">item-3</div>
            <div class="flex-item">item-4</div>
            <div class="flex-item">item-5</div>
            <div class="flex-item">item-6</div>
            <div class="flex-item">item-7</div>
            <div class="flex-item">item-8</div>
        </div>
    </body>
</html>

Untitled

플렉스 박스 레이아웃의 정렬 속성

justify-container 속성

플렉스 아이템을 주축 방향로 정렬할 때 사용하는 속성이다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>hi~</title>
        <link rel="stylesheet" href="flex-basic.css">
        <style>
            .flex-container{
                width: 300px;
                height: 200px;
                background-color: #c4c4c4;
                border: 1px solid black;
                display: flex;
                flex-direction: row; /* row, row-reverse, column, column-reverse */
                justify-content: flex-end;
            }
            .flex-item{
                color: white;
                background-color: #ff5252;
            }
            .flex-item:nth-child(2n){
                background-color: #bf5e5e;
            }
        </style>
    </head>
    <body>
        <div class="flex-container">
            <div class="flex-item">item-1</div>
            <div class="flex-item">item-2</div>
            <div class="flex-item">item-3</div>
            <div class="flex-item">item-4</div>
        </div>
    </body>
</html>