Flex Layout

Flexbox는 모던 웹을 위하여 제안된 기존 layout보다 더 세련된 방식의 니즈에 부합하기 위한 CSS3의 새로운 layout 방식입니다.

flex 관련 속성
속성 설명
align-content align-content 속성은 콘텐츠의 상하관계 정렬 상태를 정의합니다.
align-items align-items 속성은 콘텐츠 내부의 정렬 상태를 정의합니다.
align-self align-self 속성은 콘텐츠의 정렬 상태를 정의합니다.
flex flex 속성은 콘텐츠의 성질을 flex로 정의합니다.
flex-basis flex-basis 속성은 요소의 기본 단위를 정의합니다.
flex-direction flex-direction 속성은 요소의 정렬 방향을 정의합니다.
flex-flow flex-flow 속성은 요소의 정렬 방향과 줄 속성을 설정합니다.
flex-grow flex-grow 속성은 요소의 크기를 숫자를 통해 정의합니다.
flex-shrink flex-shrink 속성은 요소의 크기를 숫자를 통해 줄여줍니다.
flex-wrap flex-wrap 속성은 요소의 줄 속성을 설정합니다.
justify-content justify-content 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의합니다.
order order 속성은 flex 콘텐츠의 순서를 정의합니다.

Flex Layout - Sample1

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex</title>
    <style>
        /*base*/
        .flex{
            background: #f7f7f7;
            border-radius: 3px;
            padding : 20px;
            counter-reset: items;
            margin-bottom:20px;
        }
        .item{
            border-radius: 3px;
            background:#a2cbfa;
            border:1px solid #4390e1;
            box-sizing: border-box;
            box-shadow: 0 2px 2px rgba(0,90,250,0.05);
            min-height: 100px;
            color: #fff;
            padding: 10px;
        }
        .item::before{
            counter-increment: items;
            content:counter(items);
        }
        
        /*flex01*/
        .flex01{display: flex;}

        /*flex02*/
        .flex02{display: flex;}
        .item02{flex-grow: 1;}

        /*flex03*/
        .flex03{display: flex;}
        .item03{flex-grow: 1;}
        .item03 + .item03{margin-left: 2%;}

        /*flex04*/
        .flex04{display: flex;}
        .item04{flex-grow: 1;}
        .item04:nth-child(4){flex-grow: 2;}
        .item04 + .item04{margin-left: 2%;}

        /*flex05*/
        .flex05{display: flex; flex-direction: row-reverse;}
        .item05{flex-basis:10%; margin-left: 2%;}

        /*flex06*/
        .flex06{display: flex;}
        .item06{flex-basis:10%;}
        .item06 + .item06{margin-left: 2%;}
        .item06:last-child{margin-left: auto;}

        /*flex07*/
        .flex07{display: flex; justify-content: space-between;}
        .item07{flex-basis:300px;}
        .item07:nth-child(1){flex-basis: 100px;}
        .item07:nth-child(2){flex-basis: 300px;}
        .item07:nth-child(3){flex-basis: 100px;}
    </style>
</head>
<body>
    <div class="flex flex01">
        <div class="item item01"></div>
        <div class="item item01"></div>
        <div class="item item01"></div>
        <div class="item item01"></div>
        <div class="item item01"></div>
        <div class="item item01"></div>
        <div class="item item01"></div>
    </div>

    <div class="flex flex02">
        <div class="item item02"></div>
        <div class="item item02"></div>
        <div class="item item02"></div>
        <div class="item item02"></div>
        <div class="item item02"></div>
        <div class="item item02"></div>
        <div class="item item02"></div>
    </div>

    <div class="flex flex03">
        <div class="item item03"></div>
        <div class="item item03"></div>
        <div class="item item03"></div>
        <div class="item item03"></div>
        <div class="item item03"></div>
        <div class="item item03"></div>
        <div class="item item03"></div>
    </div>

    <!-- .flex.flex04>.item.item04*7 -->
    <div class="flex flex04">
        <div class="item item04"></div>
        <div class="item item04"></div>
        <div class="item item04"></div>
        <div class="item item04"></div>
        <div class="item item04"></div>
        <div class="item item04"></div>
        <div class="item item04"></div>
    </div>

    <div class="flex flex05">
        <div class="item item05"></div>
        <div class="item item05"></div>
        <div class="item item05"></div>
        <div class="item item05"></div>
        <div class="item item05"></div>
        <div class="item item05"></div>
        <div class="item item05"></div>
    </div>

    <div class="flex flex06">
        <div class="item item06"></div>
        <div class="item item06"></div>
        <div class="item item06"></div>
        <div class="item item06"></div>
        <div class="item item06"></div>
    </div>

        <!-- .flex.flex04>.item.item04*7 -->
        <div class="flex flex07">
            <div class="item item07"></div>
            <div class="item item07"></div>
            <div class="item item07"></div>
    
        </div>

</body>
</html>

flex-direction: 정렬, 방향 설정

.flex21{
    display: flex;
    /* 기본 */
    flex-direction: row;
    /*
    flex-direction: row-reverse
    flex-direction: column
    flex-direction: column-reverse
    */
}
.item21{
    width: 100px; margin: 10px;
}

flex-wrap: 줄넘김 처리 설정

.flex21{
    display: flex;
    /* 기본 */
    flex-wrap: nowrap;
    /*
    flex-wrap: wrap
    flex-wrap: wrap-reverse
    */
}
.item21{
    width: 300px; margin: 10px;
}

justify-content: 가로축 방향 설정

.flex21{
    display: flex;
    /* 기본 */
    justify-content: flex-start;
    /*
    justify-content: wrap-end
    justify-content: center
    justify-content: space-between
    justify-content: space-around
    justify-content: space-evenly
    */
}
.item21{
    width: 100px; margin: 10px;
}

align-content: 세로축 방향 설정

.flex21{
    display: flex;
    flex-wrap: wrap;
    height: 300px;
    /* 기본 */
    justify-content: stretch;
    /*
    align-content: flex-start
    align-content: flex-end
    align-content: center
    align-content: space-between
    align-content: space-around
    align-content: space-evenly
    */
}
.item21{
    width: 100px; margin: 10px;
}

flex 속기형

flex는 flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 속기형 작성법입니다.
flex: 1; /*flex-grow: 1, flex-shrink: 1, flex-basis: 0%*/
flex: 100px; /*flex-grow: 1, flex-shrink: 1, flex-basis: 100px*/
flex: 1 100px; /*flex-grow: 1, flex-shrink: 1, flex-basis: 100px*/
flex: 1 1 auto; /*flex-grow: 1, flex-shrink: 1, flex-basis: auto*/ 

.flex21{
    display: flex;
   
}
.item21{
    /* 기본 */
    /*flex: 1 1 0;*/
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: 0;
   /*
    flex: 2;
    flex: 200px;
    flex: 2 200px;
    flex: 1 1 150px;
   */
   margin-left: 10px;
}

Flex Layout - Sample2

.flex21{
    display: flex;
    flex-flow: column wrap; /*flex-direction, flex-wrap*/
    align-content: space-between;
    height: 800px;
}
.item21{
   width: 32%;
   margin-bottom: 2%;
}

.item21:nth-child(1){height: 100px;}
.item21:nth-child(2){height: 200px;}
.item21:nth-child(3){height: 300px;}
.item21:nth-child(4){height: 200px;}
.item21:nth-child(5){height: 200px;}
.item21:nth-child(6){height: 200px;}
.item21:nth-child(7){height: 300px;}
.item21:nth-child(8){height: 200px;}
.item21:nth-child(9){height: 100px;}
.item21:nth-child(3n+1){order: 1;}
.item21:nth-child(3n+2){order: 2;}
.item21:nth-child(3n){order: 3;}

Grid layout

Grid 관련 속성
속성 설명
grid grid 속성은 그리드 레이아웃을 정의합니다.
grid-area grid-area
grid-auto-columns grid-auto-columns는 열의 크기를 설정합니다.
grid-auto-flow grid-auto-flow는 자동 배치 방식을 설정합니다.
grid-auto-rows grid-auto-rows는 행의 크기를 설정합니다.
grid-column grid-column
grid-column-end grid-column-end
grid-column-gap grid-column-gap
grid-column-start grid-column-start
grid-gap grid-gap
grid-row grid-row는 그리드 아이템의 단축 속성을 설정합니다.
grid-row-end grid-row-end는 그리드 아이템 행의 끝 위치를 설정합니다.
grid-row-gap grid-row-gap는 그리드 아이템 행의 간격을 설정합니다.
grid-row-start grid-row-start는 그리드 아이템 행의 시작 위치를 설정합니다.
grid-template grid-template
grid-template-areas grid-template-areas
grid-template-columns grid-template-columns은 열의 크기를 설정합니다.
grid-template-rows grid-template-rows

Grid layout - Sample01

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* grid는 firefox로 확인해 보기 */
            /*base*/
            .grid{
            background: #f7f7f7;
            border-radius: 3px;
            padding : 20px;
            counter-reset: items;
            margin-bottom:20px;
        }
        .column{
            border-radius: 3px;
            background:#a2cbfa;
            border:1px solid #4390e1;
            box-sizing: border-box;
            box-shadow: 0 2px 2px rgba(0,90,250,0.05);
            min-height: 100px;
            color: #fff;
            padding: 10px;
        }
        .column::before{
            counter-increment: items;
            content:counter(items);
        }

        /* grid01 */
        .grid01{
            display: grid;
            grid-template-columns: 100px 100px 100px 100px 100px 100px 100px;
        }

            /* grid02 */
        .grid02{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        }

            /* grid03 */
            .grid03{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
            grid-gap: 2%;
        }

        /* grid04 */
        .grid04{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 2fr 1fr 1fr 1fr;
            grid-gap: 2%;
        }

        /* grid05 */
        .grid05{
            display: grid;
            /* grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; */
            /* grid-template-columns: repeat(8,100px); */
            grid-template-columns: repeat(8,1fr);
            grid-gap: 2%;
        }

        .column05:first-child{
            grid-column: 1/4;
        }

        /* grid06 */
        .grid06{
            display: grid;
            /* grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; */
            /* grid-template-columns: repeat(8,100px); */
            grid-template-columns: repeat(8,1fr);
            grid-gap: 2%;
        }

        .column06:first-child{
            grid-column: span 1/4;
        }

        /* grid07 */
        .grid07{
            display: grid;
            /* grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; */
            /* grid-template-columns: repeat(8,100px); */
            grid-template-columns: repeat(8,1fr);
            grid-gap: 2%;
        }

        .column07:last-child{
            grid-column: 4/9;
        }

        /* grid08 */
        .grid08{
            display: grid;
            /* grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; */
            /* grid-template-columns: repeat(8,100px); */
            grid-template-columns: repeat(8,1fr);
            grid-gap: 2%;
        }

        .column08:last-child{
            grid-column: span 4/9;
        }

        /* grid09 */
        .grid09{
            display: grid;
            /* grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; */
            /* grid-template-columns: repeat(8,100px); */
            grid-template-columns: repeat(8,1fr);
            grid-gap: 2%;
        }

        .column09:nth-child(2){
            grid-column: 4/6;
        }


    </style>
</head>
<body>
        <!-- .grid.grid01>.column.column01*7 -->

        <div class="grid grid01">
            <div class="column column01"></div>
            <div class="column column01"></div>
            <div class="column column01"></div>
            <div class="column column01"></div>
            <div class="column column01"></div>
            <div class="column column01"></div>
            <div class="column column01"></div>
        </div>

        <div class="grid grid02">
            <div class="column column02"></div>
            <div class="column column02"></div>
            <div class="column column02"></div>
            <div class="column column02"></div>
            <div class="column column02"></div>
            <div class="column column02"></div>
            <div class="column column02"></div>
        </div>

        <div class="grid grid03">
            <div class="column column03"></div>
            <div class="column column03"></div>
            <div class="column column03"></div>
            <div class="column column03"></div>
            <div class="column column03"></div>
            <div class="column column03"></div>
            <div class="column column03"></div>
        </div>

        <div class="grid grid04">
            <div class="column column04"></div>
            <div class="column column04"></div>
            <div class="column column04"></div>
            <div class="column column04"></div>
            <div class="column column04"></div>
            <div class="column column04"></div>
            <div class="column column04"></div>
        </div>

        <div class="grid grid05">
            <div class="column column05"></div>
            <div class="column column05"></div>
            <div class="column column05"></div>
            <div class="column column05"></div>
        </div>

        <div class="grid grid06">
            <div class="column column06"></div>
            <div class="column column06"></div>
            <div class="column column06"></div>
            <div class="column column06"></div>
        </div>

        <div class="grid grid07">
            <div class="column column07"></div>
            <div class="column column07"></div>
            <div class="column column07"></div>
            <div class="column column07"></div>
        </div>

        <div class="grid grid08">
            <div class="column column08"></div>
            <div class="column column08"></div>
            <div class="column column08"></div>
            <div class="column column08"></div>
        </div>

        <div class="grid grid09">
            <div class="column column09"></div>
            <div class="column column09"></div>
            <div class="column column09"></div>
            <div class="column column09"></div>
        </div>

</body>
</html>