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

티스토리툴바