---
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 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>