diff options
Diffstat (limited to 'files/zh-cn/glossary/grid_axis')
| -rw-r--r-- | files/zh-cn/glossary/grid_axis/index.html | 31 |
1 files changed, 31 insertions, 0 deletions
diff --git a/files/zh-cn/glossary/grid_axis/index.html b/files/zh-cn/glossary/grid_axis/index.html new file mode 100644 index 0000000000..ffd6d24f43 --- /dev/null +++ b/files/zh-cn/glossary/grid_axis/index.html @@ -0,0 +1,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> |