Flexbox 관련 CSS 속성
이 글은 Flexbox와 관련된 CSS 속성을 설명합니다.
Flexbox와 Inline-Flexbox를 사용하는 방법을 배울 수 있습니다.
YouTube Video
미리보기를 위한 HTML
css-flex.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-flex.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Layout</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Layout Related Properties</h2>
20 </header>
21 <article>
22 <h3>flex</h3>
23 <section>
24 <header><h4>CSS</h4></header>
25<pre class="sample">
26.flex-container {
27 display: flex;
28 justify-content: space-between;
29 align-items: center;
30 background-color: lightblue;
31 height: 100px;
32}
33
34.flex-item {
35 background-color: lightskyblue;
36 padding: 10px;
37 margin: 5px;
38 width: 70px;
39 height: auto;
40}
41</pre>
42 <header><h4>HTML</h4></header>
43<pre>
44<div class="flex-container">
45 <div class="flex-item">1</div>
46 <div class="flex-item">2</div>
47 <div class="flex-item">3</div>
48</div>
49</pre>
50 <header><h4>HTML+CSS</h4></header>
51 <section class="sample-view">
52 <div class="flex-container">
53 <div class="flex-item">Item 1</div>
54 <div class="flex-item">Item 2</div>
55 <div class="flex-item">Item 3</div>
56 </div>
57 </section>
58 </section>
59 </article>
60 <article>
61 <h3>flex-direction</h3>
62 <section>
63 <header><h4>flex-direction: row</h4></header>
64 <section class="sample-view">
65 <div class="flex-container" style="flex-direction: row;">
66 <div class="flex-item">Item 1</div>
67 <div class="flex-item">Item 2</div>
68 <div class="flex-item">Item 3</div>
69 </div>
70 </section>
71 <header><h4>flex-direction: row-reverse</h4></header>
72 <section class="sample-view">
73 <div class="flex-container" style="flex-direction: row-reverse;">
74 <div class="flex-item">Item 1</div>
75 <div class="flex-item">Item 2</div>
76 <div class="flex-item">Item 3</div>
77 </div>
78 </section>
79 <header><h4>flex-direction: column</h4></header>
80 <section class="sample-view">
81 <div class="flex-container" style="flex-direction: column; height: 200px;">
82 <div class="flex-item">Item 1</div>
83 <div class="flex-item">Item 2</div>
84 <div class="flex-item">Item 3</div>
85 </div>
86 </section>
87 <header><h4>flex-direction: column-reverse</h4></header>
88 <section class="sample-view">
89 <div class="flex-container" style="flex-direction: column-reverse; height: 200px;">
90 <div class="flex-item">Item 1</div>
91 <div class="flex-item">Item 2</div>
92 <div class="flex-item">Item 3</div>
93 </div>
94 </section>
95 </section>
96 </article>
97 <article>
98 <h3>justify-content</h3>
99 <section>
100 <header><h4>justify-content: flex-start</h4></header>
101 <section class="sample-view">
102 <div class="flex-container" style="justify-content: flex-start;">
103 <div class="flex-item">Item 1</div>
104 <div class="flex-item">Item 2</div>
105 <div class="flex-item">Item 3</div>
106 </div>
107 </section>
108 <header><h4>justify-content: flex-end</h4></header>
109 <section class="sample-view">
110 <div class="flex-container" style="justify-content: flex-end;">
111 <div class="flex-item">Item 1</div>
112 <div class="flex-item">Item 2</div>
113 <div class="flex-item">Item 3</div>
114 </div>
115 </section>
116 <header><h4>justify-content: center</h4></header>
117 <section class="sample-view">
118 <div class="flex-container" style="justify-content: center;">
119 <div class="flex-item">Item 1</div>
120 <div class="flex-item">Item 2</div>
121 <div class="flex-item">Item 3</div>
122 </div>
123 </section>
124 <header><h4>justify-content: space-between</h4></header>
125 <section class="sample-view">
126 <div class="flex-container" style="justify-content: space-between;">
127 <div class="flex-item">Item 1</div>
128 <div class="flex-item">Item 2</div>
129 <div class="flex-item">Item 3</div>
130 </div>
131 </section>
132 <header><h4>justify-content: space-around</h4></header>
133 <section class="sample-view">
134 <div class="flex-container" style="justify-content: space-around;">
135 <div class="flex-item">Item 1</div>
136 <div class="flex-item">Item 2</div>
137 <div class="flex-item">Item 3</div>
138 </div>
139 </section>
140 </section>
141 </article>
142 <article>
143 <h3>align-items</h3>
144 <section>
145 <header><h4>align-items: flex-start</h4></header>
146 <section class="sample-view">
147 <div class="flex-container" style="align-items: flex-start; height: 150px;">
148 <div class="flex-item">Item 1</div>
149 <div class="flex-item">Item 2</div>
150 <div class="flex-item">Item 3</div>
151 </div>
152 </section>
153 <header><h4>align-items: center</h4></header>
154 <section class="sample-view">
155 <div class="flex-container" style="align-items: center; height: 150px;">
156 <div class="flex-item">Item 1</div>
157 <div class="flex-item">Item 2</div>
158 <div class="flex-item">Item 3</div>
159 </div>
160 </section>
161 <header><h4>align-items: flex-end</h4></header>
162 <section class="sample-view">
163 <div class="flex-container" style="align-items: flex-end; height: 150px;">
164 <div class="flex-item">Item 1</div>
165 <div class="flex-item">Item 2</div>
166 <div class="flex-item">Item 3</div>
167 </div>
168 </section>
169 <header><h4>align-items: stretch</h4></header>
170 <section class="sample-view">
171 <div class="flex-container" style="align-items: stretch; height: 150px;">
172 <div class="flex-item">Item 1</div>
173 <div class="flex-item">Item 2</div>
174 <div class="flex-item">Item 3</div>
175 </div>
176 </section>
177 <header><h4>align-items: baseline</h4></header>
178 <section class="sample-view">
179 <div class="flex-container" style="align-items: baseline; height: 150px;">
180 <div class="flex-item">Item 1</div>
181 <div class="flex-item">Item 2</div>
182 <div class="flex-item">Item 3</div>
183 </div>
184 </section>
185 </section>
186 </article>
187 <article>
188 <h3>flex-wrap</h3>
189 <section>
190 <header><h4>flex-wrap: nowrap</h4></header>
191 <section class="sample-view">
192 <div class="flex-container" style="flex-wrap: nowrap;">
193 <div class="flex-item">Item 1</div>
194 <div class="flex-item">Item 2</div>
195 <div class="flex-item">Item 3</div>
196 <div class="flex-item">Item 4</div>
197 <div class="flex-item">Item 5</div>
198 <div class="flex-item">Item 6</div>
199 <div class="flex-item">Item 7</div>
200 <div class="flex-item">Item 8</div>
201 <div class="flex-item">Item 9</div>
202 </div>
203 </section>
204 <header><h4>flex-direction: wrap</h4></header>
205 <section class="sample-view">
206 <div class="flex-container" style="flex-wrap: wrap; height: 300px;">
207 <div class="flex-item">Item 1</div>
208 <div class="flex-item">Item 2</div>
209 <div class="flex-item">Item 3</div>
210 <div class="flex-item">Item 4</div>
211 <div class="flex-item">Item 5</div>
212 <div class="flex-item">Item 6</div>
213 <div class="flex-item">Item 7</div>
214 <div class="flex-item">Item 8</div>
215 <div class="flex-item">Item 9</div>
216 </div>
217 </section>
218 <header><h4>flex-direction: wrap-reverse</h4></header>
219 <section class="sample-view">
220 <div class="flex-container" style="flex-wrap: wrap-reverse; height: 300px;">
221 <div class="flex-item">Item 1</div>
222 <div class="flex-item">Item 2</div>
223 <div class="flex-item">Item 3</div>
224 <div class="flex-item">Item 4</div>
225 <div class="flex-item">Item 5</div>
226 <div class="flex-item">Item 6</div>
227 <div class="flex-item">Item 7</div>
228 <div class="flex-item">Item 8</div>
229 <div class="flex-item">Item 9</div>
230 </div>
231 </section>
232 </section>
233 </article>
234 <article>
235 <h3>flex-grow</h3>
236 <section>
237 <header><h4>CSS</h4></header>
238<pre class="sample">
239.item1 {
240 flex-grow: 1;
241}
242
243.item2 {
244 flex-grow: 2;
245}
246
247.item3 {
248 flex-grow: 0;
249}</pre>
250 <header><h4>HTML+CSS</h4></header>
251 <section class="sample-view">
252 <div class="flex-container">
253 <div class="flex-item" style="flex-grow: 1;">Item 1</div>
254 <div class="flex-item" style="flex-grow: 2;">Item 2</div>
255 <div class="flex-item" style="flex-grow: 0;">Item 3</div>
256 </div>
257 </section>
258 </section>
259 </article>
260 <article>
261 <h3>flex-shrink</h3>
262 <section>
263 <header><h4>CSS</h4></header>
264<pre class="sample">
265.item1 {
266 flex-shrink: 0;
267}
268.item2 {
269 flex-shrink: 1;
270}
271.item3 {
272 flex-shrink: 1;
273}</pre>
274 <header><h4>HTML+CSS</h4></header>
275 <section class="sample-view">
276 <div class="flex-container" style="width: 200px;">
277 <div class="flex-item" style="flex-shrink: 0;">Item 1</div>
278 <div class="flex-item" style="flex-shrink: 1;">Item 2</div>
279 <div class="flex-item" style="flex-shrink: 1;">Item 3</div>
280 </div>
281 </section>
282 </section>
283 </article>
284 <article>
285 <h3>flex-basis</h3>
286 <section>
287 <header><h4>CSS</h4></header>
288<pre class="sample">
289.item1 {
290 flex-basis: 100px;
291}
292.item2 {
293 flex-basis: 200px;
294}
295.item3 {
296 flex-basis: 25%;
297}</pre>
298 <header><h4>HTML+CSS</h4></header>
299 <section class="sample-view">
300 <div class="flex-container">
301 <div class="flex-item" style="flex-basis: 100px;">Item 1</div>
302 <div class="flex-item" style="flex-basis: 200px;">Item 2</div>
303 <div class="flex-item" style="flex-basis: 25%;">Item 3</div>
304 </div>
305 </section>
306 </section>
307 </article>
308 <article>
309 <h3>align-self</h3>
310 <section>
311 <header><h4>CSS</h4></header>
312<pre class="sample">
313.item1 {
314 align-self: flex-start;
315}
316.item2 {
317 align-self: center;
318}
319.item3 {
320 align-self: flex-end;
321}</pre>
322 <header><h4>HTML+CSS</h4></header>
323 <section class="sample-view">
324 <div class="flex-container" style="height: 150px;">
325 <div class="flex-item" style="align-self: flex-start;">Item 1</div>
326 <div class="flex-item" style="align-self: center;">Item 2</div>
327 <div class="flex-item" style="align-self: flex-end;">Item 3</div>
328 </div>
329 </section>
330 </section>
331 </article>
332 <article>
333 <h3>order</h3>
334 <section>
335 <header><h4>CSS</h4></header>
336<pre class="sample">
337.item1 {
338 order: 3;
339}
340
341.item2 {
342 order: 1;
343}
344
345.item3 {
346 order: 2;
347}</pre>
348 <header><h4>HTML+CSS</h4></header>
349 <section class="sample-view">
350 <div class="flex-container">
351 <div class="flex-item" style="order: 3;">Item 1</div>
352 <div class="flex-item" style="order: 1;">Item 2</div>
353 <div class="flex-item" style="order: 2;">Item 3</div>
354 </div>
355 </section>
356 </section>
357 </article>
358 <article>
359 <h3>inline-flex</h3>
360 <section>
361 <header><h4>display: inline-flex</h4></header>
362 <section class="sample-view">
363 Here is an example of inline-flex:
364 <div class="inline-container">
365 <div class="inline-item">1</div>
366 <div class="inline-item">2</div>
367 <div class="inline-item">3</div>
368 </div>
369 This text is in the same line as the inline-flex container.
370 </section>
371 </section>
372 </article>
373 </main>
374</body>
375</html>Flexbox와 Inline Flexbox
flex
1.flex-container {
2 display: flex;
3 justify-content: space-between;
4 align-items: center;
5 height: 100px;
6}
7
8.flex-item {
9 background-color: lightskyblue;
10 padding: 10px;
11 margin: 5px;
12 width: 70px;
13 height: auto;
14}flex는 CSS에서 요소를 효율적으로 정렬하고 배치하기 위해 사용되는 속성으로, flexbox 레이아웃 시스템의 일부입니다. 이 시스템은 주로 컨테이너 내에서 자식 요소(flex 아이템)를 쉽게 정렬하고 배치하기 위한 것이며, 기존의 float 또는 position보다 유연합니다.
flex-box클래스는display속성을flex로 설정하여 Flex 레이아웃을 적용합니다.justify-content속성에space-between을 사용하면 아이템이 좌우 끝에 배치되고, 그 사이의 여백이 고르게 분배됩니다.align-items속성을center로 설정하면 아이템이 수직으로 가운데에 정렬됩니다.
Flexbox의 기본 구조
1<div class="flex-container">
2 <div class="flex-item">Item 1</div>
3 <div class="flex-item">Item 2</div>
4 <div class="flex-item">Item 3</div>
5</div>
6
7<style>
8.flex-container {
9 display: flex;
10 /* Other flex properties */
11 flex-direction: row | row-reverse | column | column-reverse;
12 justify-content: flex-start | flex-end | center | space-between | space-around;
13 align-items: stretch | flex-start | flex-end | center | baseline;
14 flex-wrap: nowrap | wrap | wrap-reverse;
15}
16.flex-item {
17 /* Styles applied to individual items */
18 flex-grow: 0 | 1 | 2 | ...;
19 flex-shrink: 0 | 1;
20 flex-basis: auto | 10px | 25% | ...;
21 align-self: stretch | flex-start | flex-end | center | baseline;
22 order: 0 | 1 | 2 | ... | -1 | -2 | ...;
23}
24</style>Flexbox에는 두 가지 주요 요소가 있습니다: 플렉스 컨테이너와 플렉스 항목.
- 플렉스 컨테이너는 자식 요소를 감싸는 부모 요소로,
display: flex를 사용하여 지정됩니다. - 플렉스 항목은 플렉스 컨테이너 내부에 배치된 요소들로, 컨테이너의 직접 자식들입니다.
Flex 컨테이너 속성
다음 속성들은 Flex 컨테이너와 관련이 있습니다.
-
display속성에flex를 지정하여 Flex 컨테이너를 정의합니다. 내부 자식 요소들은 Flex 아이템이 됩니다. -
flex-direction속성은 Flex 아이템들이 배치되는 방향을 지정합니다. 다음과 같은 값을 지정할 수 있습니다:.row: 왼쪽에서 오른쪽으로 수평으로 정렬합니다. 이 값은 기본값입니다.row-reverse: 수평으로 오른쪽에서 왼쪽으로 정렬합니다.column: 수직으로 위에서 아래로 정렬합니다.column-reverse: 수직으로 아래에서 위로 정렬합니다.
-
justify-content속성은 플렉스 아이템이 수평(주 축을 따라) 어떻게 정렬될지를 지정합니다.flex-start: 시작 지점(왼쪽)에 정렬됩니다.flex-end: 끝 지점(오른쪽)에 정렬됩니다.center: 가운데 정렬됩니다.space-between: 아이템 사이에 공간을 균등하게 분배합니다.space-around: 아이템 주위에 공간을 균등하게 분배합니다.
-
align-items속성은 아이템들이 수직(교차 축을 따라) 어떻게 정렬될지를 지정합니다.flex-start: 맨 위에 정렬됩니다.center: 수직으로 가운데 정렬됩니다.flex-end: 맨 아래에 정렬됩니다.stretch: 컨테이너 높이를 채우기 위해 늘어납니다.baseline: 텍스트 기준선에 맞춰 정렬됩니다.
-
flex-wrap속성은 아이템이 컨테이너의 너비를 초과했을 때 줄바꿈을 할지 여부를 지정합니다.nowrap: 줄바꿈이 없습니다. 이 값은 기본값입니다.wrap: 아이템을 줄바꿈합니다.wrap-reverse: 아이템을 반대 순서로 줄바꿈합니다.
플렉스 아이템의 속성
다음 속성들은 플렉스 아이템과 관련이 있습니다.
-
flex-grow속성은 아이템의 성장 비율을 지정합니다. 값이 클수록 다른 아이템에 비해 더 많은 공간을 차지합니다.0이면 해당 아이템은 성장하지 않습니다. 이 값은 기본값입니다.1이상이면 성장 비율이 지정됩니다.
-
‘flex-shrink` 속성은 항목의 축소 비율을 지정합니다. 값이 클수록 항목이 더 많이 축소됩니다.
1이면 공간이 부족할 때 항목이 축소됩니다. 이 값은 기본값입니다.0이면 축소되지 않습니다.
-
flex-basis속성은 각 항목의 초기 너비 또는 높이를 지정합니다. 일반적으로 주축(main axis)의 크기입니다. 기본값은auto이며, 이는 콘텐츠 크기에 따라 지정되지만 픽셀 또는 백분율로 고정된 값을 지정할 수 있습니다. -
align-self속성은 개별 플렉스 항목을 교차축에 따라 정렬하는 방법을 지정합니다. 이 속성은align-items로 지정된 값을 덮어쓸 수 있습니다. -
order속성은 플렉스 항목의 표시 순서를 변경합니다. 기본값은0이며, 양수를 지정하면 나중으로, 음수를 지정하면 이전으로 이동합니다.
Flexbox의 장점
Flexbox의 장점은 다음과 같습니다:.
- 유연한 레이아웃: 요소의 정렬, 간격 및 방향을 유연하게 제어할 수 있습니다.
- 반응형 디자인에 이상적임: 자식 요소가 상위 요소의 크기에 따라 자동으로 조정됩니다.
inline-flex
1.inline-container {
2 display: inline-flex;
3 border: 2px solid #000;
4 padding: 10px;
5 justify-content: space-between;
6 background-color: lightblue;
7 width: 150px;
8 height: 50px;
9}
10.inline-item {
11 background-color: lightskyblue;
12 padding: 10px;
13 margin: 5px;
14 width: 20px;
15 height: auto;
16}-
inline-flex는 요소를 인라인 흐름에 맞게 정렬하는 동시에 플렉스박스를 사용하여 콘텐츠를 배치할 수 있는 CSS 레이아웃 스타일입니다.display: flex와 유사하게 작동하지만,inline-flex는 요소 자체를 인라인 요소처럼 작동하게 만듭니다. -
이 예제에서,
inline-flex는container클래스에 적용됩니다. 따라서container클래스는 상위<div>요소 내에서 인라인 레벨 요소처럼 작동합니다. 동시에,container클래스 내부의 자식 요소인item클래스의 요소들은 플렉스박스 규칙에 따라 배치됩니다. 이 예제에서justify-content: space-between이 사용되어, 자식 요소들 사이에 공간이 고르게 분배됩니다.
inline-flex의 사용 사례
inline-flex는 특히 다음과 같은 경우에 유용합니다:.
-
인라인 요소와 함께 플렉스 레이아웃을 사용하고 싶을 때 버튼이나 아이콘 같은 작은 UI 구성 요소에서 위치를 조정하기 위해 플렉스박스를 사용해야 할 때 유용합니다. 예를 들어, 아이콘과 텍스트를 나란히 정렬하고 가운데에 배치하고 싶을 때.
-
인라인 플로우를 유지하면서 복잡한 레이아웃을 구축할 때 인라인 요소로 작동하면서 내부 레이아웃을 유연하게 만들기 위해 플렉스박스의 장점을 활용하고 싶을 때 사용됩니다. 예를 들어, 동일한 행에 여러 요소를 나란히 놓고 그 안의 자식 요소를 조정하고 싶을 때.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.