flex를 이용하면 레이아웃을 매우 효과적으로 표현할 수 있다.
<container>
<item></item>
<container>의 꼴로 이루어져 있다.
| container에 들어갈 수 있는 것 | item에 들어갈 수 있는 것 |
| display | order --> 콘텐츠가 나오는 순서를 정해줌 / 아이템들의 순서 바꿀 때 |
| flex-direction | flex-grow |
| flex-wrap --> 아이템들이 화면의 크기 이상일 때 줄바꿈 |
flex-shrink |
| flex-flow | flex-basis |
| justify-content --> 수평과 관련된 정렬 |
flex |
| align-items --> 수직과 관련된 정렬 |
align-self |
| align-content |
우선 flex를 쓰려면 부모 앨리먼트 안에 자식 앨리먼트가 있어야 한다.
div 같은 블럭 앨리먼트들을 자유롭게 배치하고 싶을 때 flex를 쓰는데 반드시 부모에 display:flex;
라고 명시해줘야 한다.
부모에 flex를 주지 않았을 때는 div가 블럭 앨리먼트이기 때문에 화면을 꽉꽉채워 썼지만
부모에 flex를 주면
화면을 꽉꽉 채워 쓰지 않는다. 만약에 오른쪽에 밀어서 정렬하고 싶으면 display:row-reverse를 쓰면된다.
정리: flex를 하고 싶으면 container에 display:flex;라 선언해야하고 flex-direction은 기본적으로 row이다.
grow & shrink
basis는 flex의 방향에 해당하는 앨리먼트의 크기를 지정한다.
예를 들어 내가 지금 flex의 방향을 row로 지정했으니 2번째 열에 있는 애를 200px로 지정하는 것이다.
flex-grow는 여백이 있을 때 여백을 채워주는 역할을 한다.
만약 item의 flex-grow:1로 하면
여백이 채워지는 것을 볼 수 있다! (flex-grow의 기본값은 0)
만약 두번째 열에만 flex-grow를 2로 주면
두번째 열만 크기가 늘어난 것을 확인할 수 있다.
반대로 flex-shrink는 마우스로 화면의 크기를 줄일 때 flex-shrink=1;이면 화면의 크기를 줄인만큼 상대적으로 크기가 줄어드는데
flex-shrink=0;이면 내가 아무리 마우스로 화면 크기를 줄여도 원래 할당받은 크기 이하로 화면이 줄어들지 않는다.
Holy grail layout
요런 모양의 레이아웃을 holy grail layout 이라 한다.
|
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
<html>
<head>
<style>
.container {
display: flex;
flex-direction: column;
}
header {
border-bottom: 1px solid gray;
padding-right: 20px;
}
footer {
border-top: 1px solid gray;
}
.content {
display: flex;
/*한번더 display:flex해야 nav,main,aside가 가로로 정렬*/
}
.content nav {
border-right: 1px solid black;
padding-right: 20px;
}
.content aside {
border-left: 1px solid gray;
padding-left: 20px;
}
nav,
aside {
flex-basis: 150px;
flex-shrink: 0;
/*nav와 aside에서 줄어드는게 없어짐*/
/*main만 줄어듦*/
}
.content main {
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>음식</h1>
</header>
<section class="content">
<nav>
<ul>
<li>한식</li>
<li>양식</li>
<li>일식</li>
</ul>
</nav>
<main>
한식 중에서 된장찌개가 제일 맛있다.
</main>
<aside>
AD
</aside>
</section>
<footer>
<a href="">홈페이지</a>
</footer>
</div>
</body>
</html>
|
cs |
여기서 중요한게 노란색 동그라미를 친 부분이다.
우선 flex를 사용하기 위해 container에서 display:flex를 준다.
그리고 content 안에 있는 nav,aside,main을 가로로 정렬하기 위해
content에서도 한번 더 display:flex를 해줘야 했다. (flex의 기본값이 가로로 정렬)
그리고 nav와 aside에 flex-shrink를 두어서 150px이하로 크기가 줄어들지 못하게 막았다.
https://studiomeal.com/archives/197
이번에야말로 CSS Flex를 익혀보자
이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누
studiomeal.com
'CSS > 생활코딩' 카테고리의 다른 글
| [CSS기초] 그래픽 (+ 반응형 웹 단위 ) (0) | 2022.03.31 |
|---|---|
| [CSS기초] 미디어 쿼리 ,float ,다단 (0) | 2022.03.29 |
| [CSS]position (0) | 2022.03.28 |
| [CSS기초] 캐스 케이딩과 레이아웃 (0) | 2022.03.28 |
| [CSS 기초] font-size/color/text-align (0) | 2021.12.28 |
댓글