From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:40:17 -0500
Subject: initial commit

---
 files/ja/glossary/cross_axis/index.html | 76 +++++++++++++++++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 files/ja/glossary/cross_axis/index.html

(limited to 'files/ja/glossary/cross_axis')

diff --git a/files/ja/glossary/cross_axis/index.html b/files/ja/glossary/cross_axis/index.html
new file mode 100644
index 0000000000..71ea43b706
--- /dev/null
+++ b/files/ja/glossary/cross_axis/index.html
@@ -0,0 +1,76 @@
+---
+title: Cross Axis (交差軸)
+slug: Glossary/Cross_Axis
+tags:
+  - CSS
+  - Glossary
+  - cross axis
+  - flexbox
+  - クロス軸
+  - フレックスボックス
+  - 交差軸
+translation_of: Glossary/Cross_Axis
+---
+<p>{{glossary("flexbox", "フレックスボックス")}} における交差軸 (cross axis / クロス軸) は、{{glossary("main axis", "主軸")}} (main axis / メイン軸) と交差する軸で、{{cssxref("flex-direction")}} が <code>row</code> または <code>row-reverse</code> であるとき (つまり主軸が横方向であるとき)、縦方向の軸のことです。</p>
+
+<p><img alt="縦方向の交差軸" 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="横方向の交差軸" 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="Learn_more" name="Learn_more">理解を深める</h2>
+
+<h3 id="Property_reference" name="Property_reference">プロパティリファレンス</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="Further_reading" name="Further_reading">関連情報</h3>
+
+<ul>
+ <li>CSS フレックスボックスガイド: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">フレックスボックスの基本概念</a></em></li>
+ <li>CSS フレックスボックスガイド: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">フレックスコンテナー内のアイテムの配置</a></em></li>
+ <li>CSS フレックスボックスガイド: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">フレックスアイテムの折り返しのマスター</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/ja/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>
-- 
cgit v1.2.3-54-g00ecf