blob: ffd6d24f4396491b9e62c068cda003696bd7db33 (
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
|
---
title: Grid Axis
slug: Glossary/Grid_Axis
tags:
- CSS
- CSS Grids
translation_of: Glossary/Grid_Axis
---
<p>Grid布局是一种二维布局方法，能够在行和列中布置内容。因此在任何网格中都有两个轴，横轴（即行轴，内联）和纵轴（即列轴，块）。</p>
<p>沿着这些轴，可以使用<a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">盒模型对齐规范</a>中定义的属性对项目进行行对齐和列对齐。</p>
<p>在CSS中，纵轴是放置文本时用的轴。如果你有两个段落，它们从右到左，从上到下书写。在纵轴上，它们一个被放置在另一个下面。</p>
<p><img alt="Diagram showing the block axis in CSS Grid Layout." src="https://mdn.mozillademos.org/files/14775/7_Block_Axis.png" style="height: 306px; width: 940px;"></p>
<p>横轴与纵轴交叉，方向是沿着常规文本流动的。这是我们在Grid布局中的行。</p>
<p><img alt="Diagram showing the inline axis in CSS Grid Layout." src="https://mdn.mozillademos.org/files/14773/7_Inline_Axis.png" style="height: 306px; width: 940px;"></p>
<p>这些轴的物理方向可以根据文档的<a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">写入模式</a>而改变。</p>
<h2 id="了解更多">了解更多</h2>
<h3 id="扩展阅读">扩展阅读</h3>
<ul>
<li>CSS Grid Layout Guide: <em><a href="/zh_CN/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Grid布局的基本概念</a></em></li>
<li>CSS Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in Grid Layout</a></em></li>
<li>CSS Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></em></li>
</ul>
|
