blob: 0824f20777a772a902dd5a4813c49ef7ce817d89 (
plain)
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
|
---
title: 교차축
slug: Glossary/Cross_Axis
tags:
- CSS
- Glossary
- flexbox
translation_of: Glossary/Cross_Axis
---
<p>{{glossary("flexbox", "플렉스박스")}}에서, <strong>교차축</strong>이란 {{glossary("main axis", "주축")}}에 수직하는 축으로, {{cssxref("flex-direction")}}이 <code>row</code> 또는 <code>row-reverse</code> 인 경우 교차축은 열 방향을 따라갑니다.</p>
<p><img alt="The cross axis runs down the column" src="https://mdn.mozillademos.org/files/15710/Basics3.png" style="display: block; height: 125px; margin: 0px auto; width: 666px;"></p>
<p>주축이 <code>column</code> 또는 <code>column-reverse</code>인 경우 교차축은 행 방향을 따라갑니다.</p>
<p><img alt="The cross axis runs along the row." src="https://mdn.mozillademos.org/files/15711/Basics4.png" style="display: block; height: 244px; margin: 0px auto; width: 523px;"></p>
<p>아이템을 교차축에 대해 정렬할 땐 플렉스 컨테이너의 <code>align-items</code> 속성 또는 각각 아이템의<code>align-self</code> 속성을 사용합니다. 플렉스 컨테이너가 콘텐츠 여러 줄을 가졌고, 교차축에 남는 공간이 있다면 <code>align-content</code> 속성을 통해 열 간격을 조절할 수 있습니다.</p>
<h2 id="더_알아보기">더 알아보기</h2>
<h3 id="속성_참고서">속성 참고서</h3>
<div class="index">
<ul>
<li>{{cssxref("align-content")}}</li>
<li>{{cssxref("align-items")}}</li>
<li>{{cssxref("align-self")}}</li>
<li>{{cssxref("flex-wrap")}}</li>
<li>{{cssxref("flex-direction")}}</li>
<li>{{cssxref("flex")}}</li>
</ul>
</div>
<h3 id="더_읽어보기">더 읽어보기</h3>
<ul>
<li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li>
<li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning items in a flex container</a></em></li>
<li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering wrapping of flex items</a></em></li>
</ul>
<section class="Quick_links" id="Quick_Links">
<ol>
<li><a href="/ko/docs/Glossary">MDN Web Docs 용어 사전</a>
<ol>
<li>{{Glossary("Cross Axis", "교차축")}}</li>
<li>{{Glossary("Flex")}}</li>
<li>{{Glossary("Flex Container")}}</li>
<li>{{Glossary("Flex Item")}}</li>
<li>{{Glossary("Grid")}}</li>
</ol>
</li>
<li>관련 CSS 속성
<ol>
<li>{{cssxref("align-content")}}</li>
<li>{{cssxref("align-items")}}</li>
<li>{{cssxref("align-self")}}</li>
<li>{{cssxref("flex")}}</li>
<li>{{cssxref("flex-basis")}}</li>
<li>{{cssxref("flex-direction")}}</li>
<li>{{cssxref("flex-flow")}}</li>
<li>{{cssxref("flex-grow")}}</li>
<li>{{cssxref("flex-shrink")}}</li>
<li>{{cssxref("flex-wrap")}}</li>
<li>{{cssxref("justify-content")}}</li>
<li>{{cssxref("order")}}</li>
</ol>
</li>
</ol>
</section>
|
