path: root/files/zh-cn/web/css/css_box_alignment/index.html

---
title: CSS盒子对齐
slug: Web/CSS/CSS_Box_Alignment
tags:
  - CSS
  - CSS Box Alignment
  - Grid Layout
  - NeedsTranslation
  - TopicStub
  - alignment
  - box alignment
  - flexbox
  - multi-column
translation_of: Web/CSS/CSS_Box_Alignment
---
<div>{{CSSRef}}</div>

<p class="summary">CSS盒子对齐(Box Alignment)模块指定了在各种CSS盒子布局模型，如块布局，表布局，弹性布局和网格布局中，与盒子对齐有关的CSS功能。该模块旨在建立一种能一致地在CSS中指定对齐的方法。这份文档详述了出现在该规范中的一般概念。</p>

<div class="note">
<p><strong>注意</strong>：每种布局方法的文档都将详细说明在其中是如何应用“盒子对齐”的</p>
</div>

<h2 id="较老的对齐方法">较老的对齐方法</h2>

<p>传统上，CSS的对齐功能非常有限。我们可以利用 {{cssxref("text-align")}} 对齐文本，利用auto {{cssxref("margin")}} 对齐块，并且利用 {{cssxref("vertical-align")}} 属性在表格(table)或者行内块(inline-block)布局中对齐块。现在 <a href="https://www.w3.org/TR/css-inline-3/">Inline Layout</a> 与 <a href="https://www.w3.org/TR/css-text-3/">CSS Text</a> 模块中涵盖了文本对齐的内容，而盒子对齐模块让我们第一次拥有了完整的水平与垂直对齐的能力。</p>

<p>如果你最初学习过<a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">弹性盒子(Flexbox)</a>，你可能会觉得这些属性是弹性盒子规范的一部分。确实，某些属性是列在弹性盒子的 Level 1 标准中，不过规范指出我们应该提到盒子对齐规范，因为它可能会弹性盒子的基础上增加额外的功能。</p>

<h2 id="基本示例">基本示例</h2>

<p>下面的例子演示了部分盒子对齐属性在 <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">网格</a> 和 <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">弹性盒子</a> 中是如何被使用的。</p>

<h3 id="CSS_网格布局对齐示例">CSS 网格布局对齐示例</h3>

<p>下面使用网格布局的示例中，在行内轴(inline axis)（主轴(main axis)）上布局了固定宽度的轨道后，网格容器中有一些多余的空间。这些空间是使用 {{cssxref("justify-content")}} 来分配的。在块轴(block axis)（交叉轴(cross axis)）上，项目在他们的网格区域内的对齐是用 {{cssxref("align-items")}} 来控制的。第一个项目通过将 {{cssxref("align-self")}} 设置为 <code>center</code>，重载了组内设置的 <code>align-items</code> 属性。</p>

<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}}</p>

<h3 id="弹性盒子对齐示例">弹性盒子对齐示例</h3>

<p>在下面的示例中，三个弹性项目分别利用 <code>justify-content</code> 和 <code>align-items</code> 属性在主轴和交叉轴上对齐。第一个项目通过将 <code>align-self</code> 设置为 <code>center</code>，重载了组内设置的 <code>align-items</code> 属性。</p>

<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}</p>

<h2 id="关键概念与术语">关键概念与术语</h2>

<p>规范详细介绍了一些对齐术语，让我们能更容易地在特定布局方法内的具体实现之外讨论这些对齐属性。另外其中还有一些对于所有布局方法都通用的关键概念。</p>

<h3 id="与书写模式的关系">与书写模式的关系</h3>

<p>对齐方式与书写模式有关，因为在对齐项目时，我们不会考虑是否将其对齐到顶部，右侧，底部和左侧的物理尺寸。与此相反，我们根据正在使用的特定维度的开始和结束来描述对齐方式。这样可确保不管文档具有怎样的书写模式，对齐方式总是以相同的方式工作。</p>

<h3 id="对齐的两个维度">对齐的两个维度</h3>

<p>使用盒子对齐属性时，我们会在两个轴的其中之一上对齐内容——行内轴(inline axis)（或称主轴(main axis)）和块轴(block axis)（或称交叉轴(cross axis)）。内联轴是在使用特定写作模式中，沿句子单词的流动方向的轴。比如对于英语或者中文来说，内联轴是水平的。块轴是沿块(block)（比如段落元素）的布局方向延伸的轴，它会垂直穿过行内轴。</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/15952/two-axes.png"></p>

<p>当在行内轴上对齐项目时，你将用到以 <code>justify-</code> 开头的属性：</p>

<ul>
 <li>{{cssxref("justify-items")}}</li>
 <li>{{cssxref("justify-self")}}</li>
 <li>{{cssxref("justify-content")}}</li>
</ul>

<p>当在块轴上对齐项目时，你将用到以 <code>align-</code> 开头的属性：</p>

<ul>
 <li>{{cssxref("align-items")}}</li>
 <li>{{cssxref("align-self")}}</li>
 <li>{{cssxref("align-content")}}</li>
</ul>

<p>在弹性盒子布局中，情况要更复杂些，因为当 {{cssxref("flex-direction")}} 设置为 <code>row</code> 时，上面的这些说法都是对的。但当弹性盒子设为 <code>column</code> 时则恰好相反（行内轴上的对齐用 <code>justify-</code> 指定，块轴上用 <code>align-</code> ）。因此，当使用弹性盒子时，用主轴和交叉轴来思考要比用行内轴和块轴来思考更直观些。 <code>justify-</code> 属性总是用来对齐主轴，而 <code>align-</code> 属性总是用来对齐交叉轴的。</p>

<h3 id="对齐主体">对齐主体</h3>

<p><strong>对齐主体 </strong>指的是被对齐的物体。对于 <code>justify-self</code> 或 <code>align-self</code> ，或者将以上两值用 <code>justify-items</code> 或 <code>align-items</code> 成组设置时，对齐主体将是使用此属性的元素的外边距盒子(margin box)。 <code>justify-content</code> 和 <code>align-content</code> 属性因布局方法而异。</p>

<h3 id="对齐容器">对齐容器</h3>

<p><strong>对齐容器</strong> 指的是对齐主体被对齐时所处的盒子。这一般指的是包含对齐主体的块。一个对齐容器可能包含一个或多个对齐主体。</p>

<p>下图展示了一个内部包含两个对齐主体的对齐容器。</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/15953/align-container-subjects.png" style="height: 170px; width: 248px;"></p>

<h3 id="回退对齐">回退对齐</h3>

<p>如果设置的对齐方式无法实现，那么 <strong>回退对齐</strong> 将派上用场并且处理可用的空间。这一回退对齐是为每种布局方法分别指定的，且在方法的对应页面上有详细说明。</p>

<h2 id="对齐的种类">对齐的种类</h2>

<p>规范中详述了三种不同的对齐方式；这些对齐使用关键字值。</p>

<ul>
 <li><strong>位置对齐(Positional alignment)</strong>：通过对齐主体与它的对齐容器间的关系来指定对齐主体的位置。</li>
 <li><strong>基线对齐(Baseline alignment)</strong>：这些关键字把对齐看作在一个对齐上下文中多个对齐主体的基线(baseline)之间的关系。</li>
 <li><strong>分布对齐(Distributed alignment)</strong>：这些关键字把对齐看作多个对齐主体间空间的分布</li>
</ul>

<h3 id="位置对齐关键字的值">位置对齐关键字的值</h3>

<p>以下这些值是为位置对齐定义的，并且可以用于指定内容对齐的 <code>justify-content</code> 和 <code>align-content</code> 属性与指定自对齐的 <code>justify-self</code> 和 <code>align-self</code> 属性上。</p>

<ul>
 <li><code>center</code></li>
 <li><code>start</code></li>
 <li><code>end</code></li>
 <li><code>self-start</code></li>
 <li><code>self-end</code></li>
 <li><code>flex-start</code> 仅用于弹性盒子布局</li>
 <li><code>flex-end</code> 仅用于弹性盒子布局</li>
 <li><code>left</code></li>
 <li><code>right</code></li>
</ul>

<p>除了与屏幕的物理属性相关的物理值 <code>left</code> 与 <code>right</code> 之外，其他的所有值都是与内容的书写模式相关的逻辑值。</p>

<p>比如，当使用 CSS 网格布局时，如果你使用了英语并且把 <code>justify-content</code> 设为 <code>start</code> ，那么这一设置将会在行内维度上把项目移动到起始位置，也就是左侧，因为英语中句子的开头就在左侧。如果你使用的是阿拉伯语，一种从左到右书写的语言，那么相同的 <code>start</code> 值会导致项目移动到右侧，因为页面的右手边才是阿拉伯语中句子的开头。</p>

<p>这两个例子都设置了 <code>justify-content: start</code>，但是起始位置却随着书写模式而改变了。</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/15956/writing-mode-start.png" style="height: 101px; width: 478px;"></p>

<h3 id="基线对齐">基线对齐</h3>

<p>基线对齐的关键词是用于对齐一组对齐主体的盒子的基线的。他们可以用于指定内容对齐的 <code>justify-content</code> 和 <code>align-content</code> 属性与指定自对齐的 <code>justify-self</code> 和 <code>align-self</code> 属性上。</p>

<ul>
 <li><code>baseline</code></li>
 <li><code>first baseline</code></li>
 <li><code>last baseline</code></li>
</ul>

<p>基线内容对齐——为 <code>justify-content</code> 或 <code>align-content</code> 指定基线对齐——适用于把项目按行排列的布局方法。通过在盒子内添加填充，使对齐主体的基线彼此对齐。</p>

<p>基线自对齐通过在盒子外部增加外边距，从而移动盒子，实现对齐。自对齐是指当使用 <code>justify-self</code> 或 <code>align-self</code>，又或者或者将以上两值用 <code>justify-items</code> 或 <code>align-items</code> 成组设置的情况。</p>

<h3 id="分布对齐">分布对齐</h3>

<p><strong>分布对齐关键字</strong> 是用于 <code>align-content</code> 和 <code>justify-content</code> 属性的。这些关键字定义了在已经显示对齐主体后，其余的所有空间会发生什么。取值如下：</p>

<ul>
 <li><code>stretch</code></li>
 <li><code>space-between</code></li>
 <li><code>space-around</code></li>
 <li><code>space-evenly</code></li>
</ul>

<p>例如在弹性布局中，初始时是通过 <code>flex-start</code> 对齐项目的。在使用水平的，自上而下的书写模式（如英文或中文）时，若 <code>flex-direction</code> 设为 <code>row</code> ，那么项目将从最左边开始，显示项目后的所有可用空间都放置在项目之后。</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/15954/justify-content-start.png" style="height: 100px; width: 559px;"></p>

<p>如果你在弹性容器上设置了 <code>justify-content: space-between</code> ，那么可用空间会被共享并放置在项目之间。</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/15955/justify-content-space-between.png" style="height: 100px; width: 559px;"></p>

<p>为了使这些关键字生效，在项目要对齐的维度上必须有可用空间。没有空间，就没有空间可以分布。</p>

<h2 id="溢出对齐">溢出对齐</h2>

<p><code>safe</code> 与 <code>unsafe</code> 关键字可以帮助我们定义当对齐主体比对齐容器更大时的表现。<code>safe</code> 关键字会在一个指定的对齐方式导致了溢出时对齐到 <code>start</code> ，其目的是避免“数据丢失”，即项目的一部分超出了对齐容器的边界并且无法滚动到该位置。</p>

<p>如果你指定 <code>unsafe</code> ，那么即使对齐方式会导致数据丢失也会按照该对齐方式来对齐。</p>

<h2 id="盒子间的间隔">盒子间的间隔</h2>

<p>盒子对齐规范还包括 <code>gap</code>, <code>row-gap</code>，和 <code>column-gap</code> 属性。这些属性允许在一行或一列之间设置一致的间隔，只要布局是用这种方法排列项目的。</p>

<p><code>gap</code> 属性是 <code>row-gap</code> 和 <code>column-gap</code> 属性的简写，让我们可以一次性的设置这些属性：</p>

<ul>
 <li>{{cssxref("row-gap")}}</li>
 <li>{{cssxref("column-gap")}}</li>
 <li>{{cssxref("gap")}}</li>
</ul>

<p>在下面的例子中，一个网格布局使用了 <code>gap</code> 简写来在行轨道上设置 <code>10px</code> 的间隙，在列轨道上设置 <code>2em</code> 的间隙。</p>

<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-gap.html", '100%', 500)}}</p>

<p>下面这个例子在 {{cssxref("gap")}} 之外我还使用了 {{cssxref("grid-gap")}} 属性。<code>gap</code> 属性原本在网格布局中是拥有 <code>grid-</code> 前缀的，而有些浏览器只支持这些有前缀的版本。</p>

<ul>
 <li>{{cssxref("grid-row-gap")}}</li>
 <li>{{cssxref("grid-column-gap")}}</li>
 <li>{{cssxref("grid-gap")}}</li>
</ul>

<p>带前缀的版本将作为未带前缀版本的别名保留，不过你对于这些第三方的前缀你总是可以两者兼取，加上一个 <code>grid-gap</code> 属性然后再加上一个具有相同的值的 <code>gap</code> 属性。</p>

<p>另外，请注意其他的东西可能会增加显示的视觉间隔，例如使用空间分布关键字或为项目增加外边距。</p>

<h2 id="详细说明各个对齐属性的页面">详细说明各个对齐属性的页面</h2>

<p>由于CSS盒子对齐属性的实现方式取决于与它们相交互的规范，因此请参见以下每种布局类型的页面，以获取关于如何将对齐属性与其一起使用的详细信息：</p>

<ul>
 <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">Box alignment in Flexbox</a></li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout">Box alignment in CSS Grid Layout</a></li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout">Box alignment in multiple-column layout</a></li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables">Box alignment for block, absolutely positioned and table layout</a></li>
</ul>

<h2 id="参考">参考</h2>

<h3 id="CSS_属性">CSS 属性</h3>

<div class="index">
<ul>
 <li>{{cssxref("justify-content")}}</li>
 <li>{{cssxref("align-content")}}</li>
 <li>{{cssxref("place-content")}}</li>
 <li>{{cssxref("justify-items")}}</li>
 <li>{{cssxref("align-items")}}</li>
 <li>{{cssxref("place-items")}}</li>
 <li>{{cssxref("justify-self")}}</li>
 <li>{{cssxref("align-self")}}</li>
 <li>{{cssxref("place-self")}}</li>
 <li>{{cssxref("row-gap")}}</li>
 <li>{{cssxref("column-gap")}}</li>
 <li>{{cssxref("gap")}}</li>
</ul>
</div>

<h3 id="词汇表">词汇表</h3>

<div class="index">
<ul>
 <li>{{Glossary("Cross axis")}}</li>
 <li>{{Glossary("Main axis")}}</li>
 <li>{{Glossary("Alignment container")}}</li>
 <li>{{Glossary("Alignment subject")}}</li>
 <li>{{Glossary("Fallback alignment")}}</li>
</ul>
</div>

<h2 id="指南">指南</h2>

<ul>
 <li>CSS 弹性盒子指南: <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 弹性盒子指南: <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 网格指南: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in CSS Grid layouts</a></em></li>
</ul>

<h2 id="外部资源">外部资源</h2>

<ul>
 <li><a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box alignment cheatsheet</a></li>
 <li><a href="https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/">CSS Grid, Flexbox and Box alignment</a></li>
 <li><a href="https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/">Thoughts on partial implementations of Box alignment</a></li>
</ul>