[CSS3] Flex Position - Flexbox Layout

Front-End/HTML5 + CSS 2016. 12. 18. 11:20
donaricano-btn

Flex Position - Flexbox Layout


1. 정의

- CSS3에서 새롭게 명세된 레이아웃 방법

- 요소들을 자유롭게 빈공간을 채워 나간다

- 아직 버그가 발견되며 IE10에서는 -ms-붙여 사용

- flex layout은 크게 부모와 자식으로 이루어져 있다


2. 부모요소

1) flexbox layout 선언

?
1
2
3
4
5
6
7
8
9
10
11
<style>
  .container{
    display : flex;
  }
</style>
<div class="container">
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
    <div class="c4"></div>
</div>

- display : flex(inline-flex) 부모 객체의 선언 함으로서 flex layout 생성한다

2) flexbox layout 옵션

A. flex-direction

- 컨테이너 자식 요소들의 방향성을 결정

- row : 기본값, 수평으로 요소의 방향성은 좌 -> 우

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
 
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="storm" content="width=device-width, initial-scale=1">
    <style>
        <!--
            .container div{
                min-height: 140px;
                min-width:150px;
            }
            .c1{
                background-color:cornflowerblue;
            }
            .c2{
                background-color:beige;
            }
            .c3{
                background-color: cadetblue;
            }
            .c4{
                background-color: brown;
            }
            .container{
                display: flex;
                flex-direction:row;
            }
            .c1, .c2, .c3, .c4{
                width:20%
            }
        -->
    </style>
</head>
 
<div class="container">
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
    <div class="c4"></div>
</div>
 

- row-reverse : 수평, 우 -> 좌

- column : 수직(행) , 상 -> 하

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
 
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="storm" content="width=device-width, initial-scale=1">
    <style>
        <!--
            .container div{
                min-height: 140px;
                min-width:150px;
            }
            .c1{
                background-color:cornflowerblue;
            }
            .c2{
                background-color:beige;
            }
            .c3{
                background-color: cadetblue;
            }
            .c4{
                background-color: brown;
            }
            .container{
                display: flex;
                flex-direction:column;
            }
            .c1, .c2, .c3, .c4{
                width:20%
            }
        -->
    </style>
</head>
 
<div class="container">
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
    <div class="c4"></div>
</div>
 

- column-reverse : 수직(행), 하 -> 상

B. flex-wrap

- 자식 요소들 줄넘김 처리

- nowrap : 기본값, 요소들 한 줄에 모두 표현

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
 
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="storm" content="width=device-width, initial-scale=1">
    <style>
        <!--
            .container div{
                min-height: 140px;
                min-width:150px;
            }
            .c1{
                background-color:cornflowerblue;
            }
            .c2{
                background-color:beige;
            }
            .c3{
                background-color: cadetblue;
            }
            .c4{
                background-color: brown;
            }
            .c5{
                background-color: blueviolet;
            }
            .container{
                display: flex;
                flex-direction:row;
                flex-wrap: nowrap;
            }
            .c1, .c2, .c3, .c4, .c5{
                width:25%
            }
        -->
    </style>
</head>
 
<div class="container">
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
    <div class="c4"></div>
    <div class="c5"></div>
</div>
 

- wrap : 적정 길이가 넘어가면 줄 아래로 이동

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
 
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="storm" content="width=device-width, initial-scale=1">
    <style>
        <!--
            .container div{
                min-height: 140px;
                min-width:150px;
            }
            .c1{
                background-color:cornflowerblue;
            }
            .c2{
                background-color:beige;
            }
            .c3{
                background-color: cadetblue;
            }
            .c4{
                background-color: brown;
            }
            .c5{
                background-color: blueviolet;
            }
            .container{
                display: flex;
                flex-direction:row;
                flex-wrap: wrap;
            }
            .c1, .c2, .c3, .c4, .c5{
                width:25%
            }
        -->
    </style>
</head>
 
<div class="container">
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
    <div class="c4"></div>
    <div class="c5"></div>
</div>
 

- wrap-reverse : wrap과 동일, 하지만 역 방향

c. justify-content

- 컨테이너에 빈공간이 있다면 자식 요소들을 수평으로 정렬하는 방법

- flex-start : 하나로 묶어서 시작점에 위치

- flex-end : 하나로 묶어서 끝에 위치

- center : 가운데 위치

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
 
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="storm" content="width=device-width, initial-scale=1">
    <style>
        <!--
            .container div{
                min-height: 140px;
                min-width:150px;
            }
            .c1{
                background-color:cornflowerblue;
            }
            .c2{
                background-color:beige;
            }
            .c3{
                background-color: cadetblue;
            }
            .c4{
                background-color: brown;
            }
            .c5{
                background-color: blueviolet;
            }
            .container{
                border : 1px solid black;
                display: flex;
                flex-direction:row;
                flex-wrap: nowrap;
                justify-content: center;
            }
            .c1, .c2, .c3, .c4, .c5{
                width:10%
            }
        -->
    </style>
</head>
 
<div class="container">
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
    <div class="c4"></div>
    <div class="c5"></div>
</div>
 

- space-between : 양쪽 끝에 맞춰 정렬

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
 
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="storm" content="width=device-width, initial-scale=1">
    <style>
        <!--
            .container div{
                min-height: 140px;
                min-width:150px;
            }
            .c1{
                background-color:cornflowerblue;
            }
            .c2{
                background-color:beige;
            }
            .c3{
                background-color: cadetblue;
            }
            .c4{
                background-color: brown;
            }
            .c5{
                background-color: blueviolet;
            }
            .container{
                border : 1px solid black;
                display: flex;
                flex-direction:row;
                flex-wrap: nowrap;
                justify-content: space-between;
            }
            .c1, .c2, .c3, .c4, .c5{
                width:10%
            }
        -->
    </style>
</head>
 
<div class="container">
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
    <div class="c4"></div>
    <div class="c5"></div>
</div>
 

- space-around : 일정한 간격으로 정렬 

D. align-items

- 컨테이너의 빈공간이 있다면 수직으로 정렬, justify-content의 수직 버전

- flex-start : 시작점의 위치

- flex-end : 끝에 위치

- center : 가운데 위치

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
 
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="storm" content="width=device-width, initial-scale=1">
    <style>
        <!--
            .container div{
                min-height: 140px;
                min-width:150px;
            }
            .c1{
                background-color:cornflowerblue;
            }
            .c2{
                background-color:beige;
            }
            .c3{
                background-color: cadetblue;
            }
            .c4{
                background-color: brown;
            }
            .c5{
                background-color: blueviolet;
            }
            .container{
                height:1000px;
                border : 1px solid black;
                display: flex;
                flex-direction:row;
                flex-wrap: nowrap;
                justify-content: center;
                align-items: center;
            }
            .c1, .c2, .c3, .c4, .c5{
                width:10%
            }
        -->
    </style>
</head>
 
<div class="container">
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
    <div class="c4"></div>
    <div class="c5"></div>
</div>
 

- baseline : baseline 기준

- stretch : 양 끝을 기준으로 일정 공간을 만든다

E. flex-flow

- flex-direction 과 flex-wrap 을 한 줄에 정의할 때 쓴다

?
1
2
3
4
5
6
<style>
.container{
  display:flex;
  flex-flow : row wrap;
}
</style>
 

'Front-End > HTML5 + CSS' 카테고리의 다른 글

[CSS3] @media 쿼리  (0) 2016.12.18
[CSS] @media 타입  (0) 2016.12.18
[CSS] HTML 요소 가운데 정렬 쉽게 하기  (0) 2016.12.13
[CSS] Height 100% 하는법  (0) 2016.12.13
[CSS] 3단 레이아웃 (float, display)  (0) 2016.12.11
블로그 이미지

리딩리드

,

공지사항

카테고리

글 보관함

달력

«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30

티스토리툴바