如何使用 CSS 逻辑属性来控制布局

css 逻辑属性定义了一种使用布局的新方法。他们的主要目标是帮助开发人员支持不同的书写系统，例如从右到左 (RTL) 和垂直显示的脚本。这些新特性使得通过逻辑而不是物理属性来控制布局成为可能。例如，使用逻辑属性，您可能会描述元素的start与end，而不是元素的left与right边界。看到不同？

即使您不使用非 LTR 语言和多向网站，也值得熟悉新规范。逻辑属性将有助于建立使用 CSS 创建更灵活布局的新理念。

浏览器支持

由于浏览器支持仍有很大的改进空间，逻辑属性还没有准备好生产。但是，较新版本的 Firefox、chrome 和 safari 已经支持它们，因此您当然可以开始测试。

旧版本的 Firefox、Chrome 和 Safari 也提供了带有-moz-和-webkit-前缀的部分支持。目前，Internet Explorer 和 Edge 根本不支持该功能。

CSS中的内容方向

英语是用从左到右 (LTR) 和从上到下 (tb) 的水平文字（拉丁文字）书写的。然而，并不是所有的语言都是这样的。有许多使用从右到左 (RTL) 脚本的语言示例，例如阿拉伯语和希伯来语，以及其他可以垂直显示的示例，例如日语、中文和蒙古语。

“语言没有方向。脚本有一个写作方向，因此以特定脚本编写的语言将按照该脚本的方向编写。” – W3C

direction在 CSS 中，您可以使用和writing-mode属性在页面上设置内容方向。

1.写作模式

该 writing-mode 属性定义块内容（例如段落）在屏幕上的流动方式。它可以取三个值：

horizontal-tb（默认）：水平内容，从上到下；
vertical-lr：垂直内容，从左到右；
vertical-rl：垂直内容，从右到左。

2.方向

该direction属性定义内联内容（例如段落中的字符）如何在屏幕上流动。它可以取两个值：

ltr（默认）：从左到右
rtl：右到左

CSS 逻辑属性自动将布局映射到使用 direction 和 writing-mode 属性设置的内容方向。

一种新的布局方法

1. 弹性盒

逻辑布局的新方法始于 flexbox 规范。Flexbox 不考虑物理尺寸，例如左、右、上和下。它使用和之类的值flex-start ， flex-end这些值依赖于主轴和交叉轴的方向。

弹性项目是水平流动还是垂直流动还取决于您可以使用该flex-direction属性定义的两个轴的位置。总而言之，像“开始”和“结束”这样的概念在 flexbox 中是完全相关的，可以很容易地翻转。

2.CSS网格

CSS Grid 遵循相同的逻辑。CSS Grid也不知道左、右、上和下。它沿两个非分层轴按行和列布置项目。

您可以使用属性定义网格项的位置，例如grid-row-start，或使用该grid-template-areas属性命名的网格区域。与 flexbox 类似，CSS Grid 也有逻辑属性而不是物理属性。

3. 逻辑属性

CSS 逻辑属性将这种新方法提升到了一个新的水平。它们改变了我们定义常用属性的方式，例如margin、padding、 width和height。

物理与逻辑维度

上、下、左、右是屏幕的物理尺寸。目前，CSS 将属性映射到这些物理方向。然而，当你有一个 RTL 网站时，你不想从左边开始写。例如，如果要在文本前添加边距，则需要使用margin-right属性而不是margin-left，您将在 LTR 页面上使用该属性。

而且，这只是设置一个内容框的边距。如果你想为整个站点添加 RTL 支持，你要么必须重写整个 CSS，要么使用 Sass 或其他 CSS 预处理器执行转换。

逻辑属性改变了这种作案手法。他们使用块和内联尺寸而不是垂直和水平尺寸：

块尺寸是块项目（例如段落）在页面上的布局方式（英文从上到下）。
内联维度是内联项目（例如段落中的字符）在页面上的布局方式（英文从左到右）。

以下是英语和其他 LTR/horizontal-tb 语言中逻辑维度映射到物理维度的方式：

逻辑维度	物理尺寸（英文）
块启动	最佳
块端	底部
内联启动	剩下
内联端	正确的

在 RTL/horizontal-tb 脚本（如阿拉伯语）中，逻辑到物理的映射如下所示：

逻辑维度	物理尺寸（阿拉伯文字）
块启动	最佳
块端	底部
内联启动	正确的
内联端	剩下

并且，这就是逻辑维度在以tategaki (縦书き)风格编写时如何与像日语这样的垂直 rl 脚本一起使用：

逻辑维度	物理尺寸（日语）
块启动	正确的
块端	剩下
内联启动	最佳
内联端	底部

如您所见，CSS 逻辑属性将允许开发人员随心所欲地翻转布局。

CSS 逻辑属性

CSS 逻辑属性目前由1 级规范（编辑草案；提供公开讨论）定义。

下面，您可以找到最重要的逻辑属性的示例。它们是常用物理属性的逻辑等价物，例如margin和float。如果您对逻辑属性的完整列表感兴趣，也请查看 MDN 的参考指南。

1.文本对齐

您可以在支持 CSS 逻辑属性的浏览器中将该text-align属性与start和值一起使用。end在显示 LTR 的英语和其他语言中，start等于left; 并end等于right。

在诸如阿拉伯语之类的 RTL 示例中，它的工作原理相反：start 等于right和end 等于left。

.align-start {
  /* Physical property | English */
  text-align: left;

  /* Logical property */
  text-align: start;
}
.align-end {
/* Physical property | English */
  text-align: right;

  /* Logical property */
  text-align: end;
}

在下面的演示中，您可以测试如果您更改或页面的text-align逻辑属性如何工作：directionwriting-mode

See the Pen CSS Logical Properties: text-align by Envato Tuts+ (@tutsplus) on CodePen.

2. 边距、内边距、边框

您还可以使用逻辑属性定义margin、padding和。border您需要使用-inline-start后缀来指示内联维度的开始，即left英文和其他 LTR/tb 语言。同样，-inline-end后缀用于内联维度的末尾right，在英语网站上。

-block-start后缀是块维度的开始——英文：top， -block-end而是块维度的结束——英文：bottom.

.add-border {
  /* Physical properties | English */
  border-left: 0.625rem red solid;
  border-top: 0.625rem blue solid;
  border-right: 0.625rem purple solid;
  border-bottom: 0.625rem green solid;

  /* Logical properties */
  border-inline-start: 0.5rem red solid;
  border-block-start: 0.5rem blue solid;
  border-inline-end: 0.5rem purple solid;
  border-block-end: 0.5rem green solid;
}

.add-margin {
  /* Physical properties | English */
  margin-left: 0.25rem;
  margin-top: 0.5rem;
  margin-right: 0.75rem;
  margin-bottom: 1rem;

  /* Logical properties */
  margin-inline-start: 0.25rem;
  margin-block-start: 0.5rem;
  margin-inline-end: 0.75rem;
  margin-block-end: 1rem;
}

.add-padding {
  /* Physical properties | English */
  padding-left: 1.25rem;
  padding-top: 1.5rem;
  padding-right: 1.75rem;
  padding-bottom: 2rem;

  /* Logical properties */
  padding-inline-start: 1.25rem;
  padding-block-start: 1.5rem;
  padding-inline-end: 1.75rem;
  padding-block-end: 2rem;
}

下面，您可以测试属于该属性的逻辑属性border。

请注意，您还可以使用普通边框属性的逻辑等价物。例如，border-inline-start-color(而不是border-left-color) 也是一个有效的逻辑属性。

See the Pen CSS Logical Properties: border by Envato Tuts+ (@tutsplus) on CodePen.

不过，您可能已经注意到这里缺少一些东西。最有可能的是，您经常使用margin、padding和border速记，而不是诸如padding-top. 逻辑属性如何处理这些速记？目前，他们根本不处理它们。

这些速记的逻辑等价物仍然是一个悬而未决的问题，正在积极讨论中。将来会有解决方案，但是，现在，您需要使用逻辑边距、填充和边框的普通属性。有关更多信息，请查看CSS 工作组的 GitHub 存储库中的Issue 1282 。

3. 浮动

您还可以使用逻辑属性定义浮点数。在 LTR 脚本中， inline-start等于left和inline-end等于right. 在 RTL 语言中，情况正好相反，因为这里的内联维度从屏幕右侧开始。

.float-inline-start {
  /* Physical property | English */
  float: left;

  /* Logical property */
  float: inline-start;
}

.float-inline-end {
  /* Physical property | English */
  float: right;

  /* Logical property */
  float: inline-end;
}

您可以在下面的演示中测试逻辑浮点数：

See the Pen CSS Logical Properties: float by Envato Tuts+ (@tutsplus) on CodePen.

4. 宽度和高度

大小调整属性，即width和height，也有它们的逻辑等价物。在自上而下的书写脚本中，inline-size等同于width，因为这是内联元素（例如段落中的字符）在屏幕上流动的维度。并且，block-size等于height，因为这是块元素（例如段落）流动的维度。

在垂直书写脚本中，height是内联尺寸 ( inline-size)，因为字符垂直流动，width是块尺寸 ( block-size)，因为段落水平流动。

正如您在下面看到的，max-width、max-height、min-width和min-height也有自己的逻辑属性。

.add-dimensions {
   /* Physical property | English */
   width: 600px;
   height: 200px;

   /* Logical property */
   inline-size: 600px;
   block-size: 200px;
}

.max-dimensions {
   /* Physical property | English */
   max-width: 100%;
   max-height: 300px;

   /* Logical property */
   max-inline-size: 100%;
   max-block-size: 300px;
}

.min-dimensions {
   /* Physical property | English */
   min-width: 50%;
   min-height: 200px;

   /* Logical property */
   min-inline-size: 50%;
   min-block-size: 200px;
}

在下面的演示中，您可以尝试inline-size和block-size属性如何在不同的方向和书写模式下工作：

See the Pen CSS Logical Properties: width and height by Envato Tuts+ (@tutsplus) on CodePen.

5.职位

您也可以使用逻辑属性在屏幕上定位元素。逻辑位置替换了物理top、right、bottom和left属性。

块维度的开始（top英文）由inset-block-start逻辑属性定义。同样，内联维度的开始（right英文）由inset-inline-start属性定义。

逻辑位置也有一个很酷的速记属性inset：

inset-block-start,
inset-inline-start,
inset-block-end,
inset-inline-end

命令。

.add-position {
   /* Physical properties | English */
   top: 0;
   right: 100px;
   bottom: 200px;
   left: 300px;


   /* Logical properties | Longhand */
   inset-block-start: 0;
   inset-inline-start: 100px;
   inset-block-end: 200px;
   inset-inline-end: 300px

   /* Logical properties | Shorthand */
   inset: 0 100px 200px 300px;
}