css中东布局rtl_如何将RTL支持添加到Flexbox和CSS网格

css中东布局rtl

逻辑属性定义了一种新方法，该方法改变了我们在CSS中使用布局的方式。除其他优点外，它们还使我们能够基于逻辑属性（Flexbox和CSS网格）向布局添加RTL（从右到左）语言支持。

但是首先让我们简要地了解一下逻辑属性如何在CSS中工作。

1.逻辑布局和内容方向

CSS逻辑属性的主要目标是使开发人员能够在writing-mode或direction属性发生更改时轻松翻转布局。假设您有一个LTR（从左到右）网站，并且想要将其转换为RTL脚本，例如与阿拉伯语或希伯来语一起使用的脚本。如果您一直在CSS中使用逻辑属性，则只需添加direction: rtl; 规则移至页面，版面就会自动翻转。

逻辑属性使用逻辑而非物理方向来定义布局。例如， start关键字在LTR脚本（如Latin）中等于left ，而在RTL脚本中则等于right 。同样， end等同于right的LTR和left在RTL脚本。这就是为什么在依赖逻辑尺寸的布局中添加RTL支持很容易的原因。

CSS逻辑属性具有三个主要用例：

flexbox（例如flex-start ， flex-end ）
CSS网格（例如grid-row-start ， grid-row-end ， grid-column-start ， grid-column-end ）
常用属性的逻辑等效项，例如margin ， padding ， border ， text-align等等。

现在，让我们看看如何利用逻辑属性将RTL支持添加到flexbox和CSS网格中。

2.如何向Flexbox添加RTL支持

以下示例使用flexbox创建新闻网站布局（此处是完整的教程）。它具有居中的标题，并包含几个不同大小的卡片。该演示使用两个媒体查询： 800px和1000px 。卡的排列将取决于您观看演示的视口大小：

要创建CSS的RTL版本，我们只需添加一条规则：

* {
direction: rtl;
}

而且，正如您在下面看到的那样，在每个视口大小下，演示都可以完美翻转（不仅是文本，而且布局也是如此）：

为什么这么容易做到？

在CSS布局中使用物理方向时，它们通常会打乱您的RTL工作。但是，如果您查看下面CSS，则会发现未使用物理方向，因此为什么如此容易翻转布局（已从代码中删除了诸如字体和颜色之类的文本修饰规则，以便于阅读）：

.header {
padding: 40px 0 20px;
text-align: center;
}
.header h2 a {
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.main {
margin: 0 auto;
max-width: 1040px;
padding: 10px;
}
.column {
flex: 1;
flex-direction: column;
}
.article {
display: flex;
flex: 1;
flex-direction: column;
flex-basis: auto;
margin: 10px;
}
.article-image {
display: block;
padding-top: 75%;
position: relative;
width: 100%;
}
.article-image img {
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.article-image.is-3by2 {
padding-top: 66.6666%;
}
.article-image.is-16by9 {
padding-top: 56.25%;
}
.article-body {
display: flex;
flex: 1;
flex-direction: column;
padding: 20px;
}
.article-title {
flex-shrink: 0;
}
.article-content {
flex: 1;
margin-top: 5px;
}
.article-info {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
@media screen and (min-width: 800px) {
.columns,
.column {
display: flex;
}
}
@media screen and (min-width: 1000px) {
.first-article {
flex-direction: row;
}
.first-article .article-body {
flex: 1;
}
.first-article .article-image {
height: 300px;
order: 2;
padding-top: 0;
width: 400px;
}
.main-column {
flex: 3;
}
.nested-column {
flex: 2;
}
}

Flexbox负责整个布局，而flexbox属性是逻辑属性。大小，对齐方式属性（例如border ， margin ， padding和width在某些情况下可能会引起问题，因为它们依赖于物理方向而不是逻辑方向。例如，该演示使用旧样式的padding-top属性代替了逻辑上等效的全新padding-block-start 。

但是，由于我们要执行从LTR到RTL的转换，我们只需要翻转水平（左右）轴，而不需要翻转垂直（上下）轴。上面的代码仅包含定义垂直方向的属性，例如padding-top和border-bottom 。这些在两种布局中保持不变。

由于代码中没有定义水平方向的任何属性（例如， padding-left就是这样的属性），因此我们不必调整它们以适合RTL脚本。

3.如何在CSS网格中添加RTL支持

现在，让我们看一下CSS网格演示。它定义了一个基于CSS网格的不对称布局（此处是完整的教程）：

让我们向CSS添加相同的direction规则，看看它如何修改原始布局：

* {
direction: rtl;
}

演示的翻转方式如下：

尽管大多数元素都按预期进行了翻转，但仍缺少某些内容。如果仔细比较这两个演示，您会发现图像和“直布罗陀”标题之间的皇冠徽章已经消失。

那么，王冠在哪里？

CSS为我们提供了有关为什么缺少表冠的答案。它仍然存在，但是隐藏在背景中。这是演示CSS代码（没有颜色，字体和其他文本修饰规则）：

blockquote {
margin: 0 0 2em 0;
}
.cta {
padding: 100px 0 100px 20%;
}
.cta h1 {
margin: 0 0 20px 0;
position: relative;
}
.button {
display: inline-block;
padding: .8em 1.5em;
}
.strapline {
margin-top: 100px;
position: relative;
}
.strapline::before {
content: '';
display: block;
background: url(wavy.svg) repeat-x;
background-size: cover;
width: 20%;
height: .5em;
position: absolute;
top: -3em;
left: 40%;
}
.cta h1::before {
content: '';
display: block;
height: 1em;
width: 1em;
background: url(badge.svg) no-repeat center center;
background-size: 80%;
position: absolute;
left: -120px;
top: 0;
}
/* Grid layout */
.grid1 {
display: grid;
grid-template-columns: 3fr 6fr 1fr 5fr 10fr 2fr;
grid-template-rows: 100px auto 15px auto auto;
}
.img1 {
background: url(wooden.jpg);
background-size: cover;
grid-column: 1 / span 2;
grid-row: 2 / span 3;
}
.img2 {
background: url(speaker.jpg);
background-size: cover;
grid-column: 2 / span 2;
grid-row: 3 / span 3;
}
.img3 {
background: url(waves.jpg);
background-size: cover;
grid-column: 5 / span 2;
grid-row: 4 / span 2;
}
.strapline {
grid-column: 3 / span 3;
grid-row: 2 / span 1;
padding: 0 16%;
text-align: center;
margin: 0;
}
.cta-wrapper {
grid-column: 4 / span 2;
grid-row: 4 / span 2;
}

上面的代码使用了许多CSS网格属性，例如grid-row ， grid-column ， grid-template-rows和grid-template-columns 。但是，由于CSS网格依赖于逻辑尺寸而不是物理尺寸，因此与网格相关的属性不会成为问题。

该问题源于将属性物理放置在水平（左右）维度上的其他属性：

.cta {
padding: 100px 0 100px 20%;
}
.strapline::before {
left: 40%;
}
.cta h1::before {
left: -120px;
}

为了支持RTL脚本，我们需要扭转left和right如下：

.cta {
padding: 100px 20% 100px 0;
}
.strapline::before {
right: 40%;
}
.cta h1::before {
right: -120px;
}

如果您查看修改后的RTL演示，您会发现表冠已经重新出现，现在一切都已完美对齐：

您可能已经注意到，在修改后CSS中，我们使用了right而不是相应的逻辑属性。这是因为逻辑属性尚未投入生产，因为对浏览器的支持仍然有些零散。

然而，这是修改后CSS 会是什么样使用的逻辑等价right属性：

.cta {
padding: 100px 20% 100px 0;
}
.strapline::before {
inset-inline-start: 40%;
}
.cta h1::before {
inset-inline-start: -120px;
}

在RTL脚本中，等效的right是inset-inline-start ，因为这是内联轴的开始。但是，在LTR脚本中， inset-inline-start等于left ，在这种情况下，行从屏幕左侧开始。

因此，如果原始演示使用inset-inline-start逻辑属性而非物理left方向，则我们可以将布局从LTR转换为RTL，而无需调整任何规则。

在下面，您可以使用逻辑属性看到相同的RTL演示。为了一致性，我也将top更改为inset-block-start 。

结论

CSS逻辑属性使我们比以往任何时候都更容易支持从右到左脚本。我们可以为基于flexbox和CSS网格的页面快速添加RTL支持，因为它们是不依赖于物理方向（如左，右，上和下）的逻辑布局。

除了RTL语言之外，我们还可以使用逻辑属性将自上而下的书写模式转换为垂直语言脚本（例如日语）。查看我以前的教程以获取更多详细信息！

翻译自: https://webdesign.tutsplus.com/articles/how-to-add-rtl-support-to-flexbox-and-css-grid--cms-33039

css中东布局rtl