盒对齐

非标准：此功能是非标准的，不在标准轨道上。不要在面向Web的生产站点上使用它：它不适合每个用户。实现之间也可能存在很大的不兼容性，并且行为可能在未来发生变化。

不推荐：不再建议使用此功能。尽管一些浏览器可能仍然支持它，但它可能已经从相关的web标准中删除，可能正在删除过程中，或者可能只是出于兼容性目的而保留。避免使用它，并在可能的情况下更新现有代码；请参阅兼容性表以指导您的决策。请注意，此功能可能随时停止工作。

警告：这是原始CSS Flexible Box Layout Module草案的一个属性，已被更新的标准取代。

这个盒对齐 CSS公司属性指定元素如何在垂直方向上跨其布局对齐其内容。只有当框中有多余的空间时，属性的效果才可见。

请参见柔性接线盒有关当前标准的信息。

布局方向取决于元素的方向：水平或垂直。

语法

css公司
/*关键字值*/
盒对齐:开始;
盒对齐:中心;
盒对齐:结束;
盒对齐:基线;
盒对齐:伸展;

/*全局值*/
箱线:继承;
箱线:最初的;
箱线:未设置;

这个盒对齐属性指定为下面列出的关键字值之一。

值

开始

该框在开头对齐内容，在末尾留出多余的空间。

中心

该框将内容居中对齐，在开始和结束之间等分任何多余的空间。

结束

该框在末尾对齐内容，在开头留出多余的空间。

基线

该框对齐内容的基线（对齐文本）。这仅适用于长方体的方向为水平的情况。

伸展

盒子会拉伸内容，这样盒子里就没有多余的空间了。

笔记

盒子的边缘表示开始对齐目的取决于长方体的方向：

  • 对于水平元素开始是顶部边缘。
  • 对于垂直元素开始是左边缘。

与起点相对的边缘被指定为结束.

如果使用元素的排列属性，则忽略样式。

形式化定义

初始值伸展
适用于带有CSS的元素显示的值箱或内联盒
继承不
计算值按规定
动画类型离散的

形式语法

盒对齐=开始|中心|结束|基线|拉伸

示例

设置框对齐

html格式
<!doctype（文档类型） html格式>
<html格式 朗=”英语-美国”>
  <头>
    <元 字符集=”UTF-8型” />
    <标题>CSS方框对齐示例</标题>
    <风格>
      div示例 {
        显示:箱; /*按规定*/
        显示:-moz盒; /*Mozilla公司*/
        显示:-网络工具箱; /*网络工具包*/

        /*让这个盒子比孩子们高，所以有地方放盒子*/
        高度:400像素;

        /*让这个盒子比孩子们宽所以有空间让箱子对齐*/
        宽度:300像素;

        /*儿童应垂直定向*/
        箱形的:垂直的; /*按规定*/
        -moz-box定向:垂直的; /*Mozilla公司*/
        -webkit-box定向:垂直的; /*网络工具包*/

        /*将子项与此框的水平中心对齐*/
        盒对齐:中心; /*按规定*/
        -moz-box-对齐:中心; /*Mozilla公司*/
        -网络工具箱对齐:中心; /*网络工具包*/

        /*把孩子们放在这个盒子的底部*/
        盒装:结束; /*按规定*/
        -moz-box-pack系列:结束; /*Mozilla公司*/
        -网络工具箱:结束; /*网络工具包*/
      }

      div示例>p {
        /*让孩子比父母窄，所以有空间让箱子对齐*/
        宽度:200像素;
      }
    </风格>
  </头>
  <身体>
    <div公司 班=”例子”>
      <第页>我将是div底部的第二个。例如，水平居中。</第页>
      <第页>我将位于div的底部。例如，水平居中。</第页>
    </div公司>
  </身体>
</html格式>

规格

不属于任何标准。

浏览器兼容性

BCD表仅在浏览器中加载

另请参见