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

05. HTML/css

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

THE HEYDAZE 2021. 3. 21. 18:45

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; }

저작자표시

'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

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

엑셀 채우기, 엑셀 함수, 엑셀 단축키, 엑셀 행, 엑셀 표시형식, 엑셀 필터, 엑셀 글씨, 엑셀 분석작업, 엑셀 기타작업, 엑셀 정렬, 사무자동화를 통하여 본업에 조금더 힘을 쓸 수 있도록.., SY, 엑셀 계산작업, 깁, 엑셀 기본작업, 엑셀 표, 엑셀 기본사용법, 졵, 엑셀 열, 엑셀 가운데맞춤,

Today :
Yesterday :

나눔코딩

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