01. 플렉스 레이아웃 (Flex Layout)

OS	Windows 10 PRO 64bit 버전 20H2 (OS 빌드 19042.867)
CSS	3

깃헙 주소

sout1217/TIL2021

Contribute to sout1217/TIL2021 development by creating an account on GitHub.

github.com

Flex Layout

Container
- display
- justify-content
- align-items
- flex-wrap
- flex-direction
- flex-flow (flex-wrap + flex-direction)
- align-content (default stretch)
Item
- flex-grow
- order
- flex-shrink
- align-self

📌 Container

default

.container { } .item { }

[코드보기]

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>플렉스 레이아웃</title>
    <style>
        body {
            margin: 0;
        }
        .t1 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .t1:after {
            content: attr(data-value);
        }
        .t2 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .t2:after {
            content: attr(data-value);
        }
        .containerWrap {
            position: relative;
            display: block;
        }
        .container {
            border: 1px red dashed;
            height: 50vh;
            background: #eeef85;
            box-sizing: border-box;
        }
        .item {
            width: 40px;
            height: 40px;
            border: 1px solid;
        }
        .item1, .item11 {
            background: #9bff31;
        }
        .item2, .item12 {
            background: #e8c453;
        }
        .item3, .item13{
            background: #31ff7d;
        }
        .item4, .item14 {
            background: #31ffbe;
        }
        .item5, .item15{
            background: #3195ff;
        }
        .item6, .item16 {
            background: #fffc31;
        }
        .item7, .item17{
            background: #8031ff;
        }
        .item8, .item18{
            background: #ff31b3;
        }
        .item9, .item19 {
            background: #ff3131;
        }
        .item10, .item20 {
            background: #3153ff;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="t1" data-value="Flex Box 1"></div>
    <div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item4">4</div>
        <div class="item item5">5</div>
        <div class="item item6">6</div>
        <div class="item item7">7</div>
        <div class="item item8">8</div>
        <div class="item item9">9</div>
        <div class="item item10">10</div>
    </div>
</div>
<div class="parent">
    <div class="t2" data-value="Flex Box 2"></div>
    <div class="container">
        <div class="item item11">11</div>
        <div class="item item12">12</div>
        <div class="item item13">13</div>
        <div class="item item14">14</div>
        <div class="item item15">15</div>
        <div class="item item16">16</div>
        <div class="item item17">17</div>
        <div class="item item18">18</div>
        <div class="item item19">19</div>
        <div class="item item20">20</div>
    </div>
</div>
</body>
</html>

flex

.container { display: flex; }

justify-cotent

flex-start

.container { display: flex; justify-content: flex-start; }

center

.container { display: flex; justify-content: center; }

flex-end

.container { display: flex; justify-content: flex-end; }

space-evenly

.container { display: flex; justify-content: space-evenly; }

space-around

.container { display: flex; justify-content: space-around; }

space-between

.container { display: flex; justify-content: space-between; }

align-items

flex-start

.container { display: flex; align-items: flex-start; }

center

.container { display: flex; align-items: center; }

flex-end

.container { display: flex; align-items: flex-end; }

baseline

.container { display: flex; align-items: baseline; } .item1 { width: 100px; height: 100px; line-height: 100px; text-align: center; }

stretch (default)

.container { display: flex; align-items: stretch; } .item { /*height: 40px;*/ width: 40px; border: 1px solid; }

justify-content & align-items

flex-wrap

⚠ item 들이 container 의 넓이를 벗어나는 경우

nowrap (default)

.container { display: flex; flex-wrap: nowrap; }

wrap

.container { display: flex; flex-wrap: wrap; }

wrap-reverse

.container { display: flex; flex-wrap: wrap-reverse; }

flex-direction

row (default)

.container { display: flex; flex-direction: row; }

row-reverse

.container { display: flex; flex-direction: row-reverse; }

column

.container { display: flex; flex-direction: column; }

column-reverse

.container { display: flex; flex-direction: column-reverse; }

flex-direction: column & justify-content

column
flex-start

.container { display: flex; flex-direction: column; justify-content: flex-start; }

column
center

.container { display: flex; flex-direction: column; justify-content: center; }

column
flex-end

.container { display: flex; flex-direction: column; justify-content: flex-end; }

column
space-evenly

.container { display: flex; flex-direction: column; justify-content: space-evenly; }

column
space-evenly

.container { display: flex; flex-direction: column; justify-content: space-around; }

column
space-between

.container { display: flex; flex-direction: column; justify-content: space-between; }

flex-direction: column & align-items

column
flex-start

.container { display: flex; flex-direction: column; align-items: flex-start; }

column
center

.container { display: flex; flex-direction: column; align-items: center; }

column
flex-end

.container { display: flex; flex-direction: column; align-items: flex-end; }

flex-direction: column & align-items & justify-content

align-content

stretch (default)

.container { display: flex; flex-wrap: wrap; align-content: stretch; } .item { width: 100%; }

flex-start

.container { display: flex; flex-wrap: wrap; align-content: flex-start; } .item { width: 100%; }

center

.container { display: flex; flex-wrap: wrap; align-content: center; } .item { width: 100%; }

flex-end

.container { display: flex; flex-wrap: wrap; align-content: flex-end; } .item { width: 100%; }

space-evenly

.container { display: flex; flex-wrap: wrap; align-content: space-evenly; } .item { width: 100%; }

space-around

.container { display: flex; flex-wrap: wrap; align-content: space-around; } .item { width: 100%; }

space-between

.container { display: flex; flex-wrap: wrap; align-content: space-between; } .item { width: 100%; }

inline-flex

containerWrap : block
container : inline-flex

.containerWrap { display: block; } .container { display: flex; flex-direction: column; align-items: flex-end; }

containerWrap : inline-block
container : inline-flex

.containerWrap { display: inline-block; } .container { display: flex; flex-direction: column; align-items: flex-end; }

💥 container n개 의 넓이의 합이 containerWrap 의 넓이 보다 큰 경우 자동으로 block 처리 된다
💥 만약 container 1개의 넓이가 containerWrap 넓이보다 큰 경우 가로 스크롤이 생긴다
containerWrap : inline-block
container : inline-flex

.containerWrap { display: inline-block; } .container { display: flex; flex-direction: column; align-items: flex-end; }

📌 Item

flex-grow = flex

.item { flex-grow: 1; }

.item1 { flex-grow: 1; }

.item1, .item10 { flex-grow: 1; }

container - flex-wrap: wrap & item - flex-grow: 1

.item { width: 40px; flex-grow: 1; }

.item { width: 80px; flex-grow: 1; }

.item { width: 750px; flex-grow: 1; }

order

order: 0 (default)

.item1 { order: 0 }

order: 1

.item1 { order: 1 }

order: 1
order: -1

.item1 { order: 1 } .item3 { order: -1 }

flex-shrink

flex-shrink: 1 (default)

.item5 { flex-shrink: 1; }

flex-shrink: 0

.item5 { flex-shrink: 10; }

flex-shrink: 10

.item5 { flex-shrink: 0; }

align-self

flex-start (default)

.item2 { align-self: flex-start; }

center

.item2 { align-self: center; }

flex-end

.item2 { align-self: flex-end; }

baseline

.container { display: flex; align-items: stretch; } .item { line-height: 25vw; } .item2 { align-self: baseline; }

이 글은 (새창열림) 본 저작자 표시 규칙 하에 배포할 수 있습니다. 자세한 내용은 Creative Commons 라이선스를 확인하세요.

'05. HTML > css' 카테고리의 다른 글

06. CSS - 아래 테두리 주기 border-bottom hover (0)	2021.09.10
05. CSS - 리스트 링크 (list-item link) (0)	2021.09.10
04. CSS - 버튼 누름 표시 (0)	2021.09.10
03. CSS - 모달창(다이얼로그창) 만들기 (0)	2021.09.10
02. 백그라운드 blur 주기 (0)	2021.08.08

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`