如何避免设置dir="RTL"时CSS Flex/Grid布局出现顺序反转

• 我有一个简单的div（采用grid layout实现，相同问题也适用于flexbox），内部展示三个不同的text元素。
• 问题在于，每当html的dir属性设置为rtl时，网格项的顺序就会发生变化，我希望在该特定场景下阻止这一变化（这类场景中内容顺序不基于书写方向，而是由语义价值决定）。
• 备注：我可以给.container选择器添加direction: ltr;规则，但这会产生不符合预期的样式，因为我需要使用面向行内的样式设置。

JS代码 #

let direction = 'rtl';
document.getElementById('toggle-direction').addEventListener('click', () => {
  direction = direction === 'rtl' ? 'ltr' : 'rtl';
  document.documentElement.setAttribute('dir', direction);
});

CSS代码 #

.container {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(3, 1fr);
  border-radius: 5px;
  padding: 10px;
}

.left-arrow {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  margin-inline-end: auto;
}

.center-content {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  text-align: center;
}

.right-arrow {
  grid-row: 1 / 2;
  grid-column: 3 / 4;
  margin-inline-start: auto;
}

#toggle-direction {
  grid-row: 2 / 3;
  grid-column: 1 / 4;
}

HTML代码 #

<div class="container">
  <span class="left-arrow"><</span>
  <span class="center-content">Center content</span>
  <span class="right-arrow">></span>
  <button id="toggle-direction">Toggle direction</button>
</div>

该问题本质是Grid布局的列索引顺序会跟随全局dir属性自动调整：ltr下列索引从左向右递增，rtl下列索引从右向左递增，固定写死的grid-column数值定位就会出现顺序颠倒的问题。

推荐使用属性选择器针对不同文本方向场景单独调整网格定位规则，不需要修改容器的direction属性，完全不影响内部行内样式的正常表现，修改后的CSS代码如下：

.container {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(3, 1fr);
  border-radius: 5px;
  padding: 10px;
}

.left-arrow {
  grid-row: 1 / 2;
  margin-inline-end: auto;
}
/* ltr下左箭头在第一列 */
html[dir="ltr"] .left-arrow {
  grid-column: 1 / 2;
}
/* rtl下左箭头仍固定在最左侧的第三列 */
html[dir="rtl"] .left-arrow {
  grid-column: 3 / 4;
}

.center-content {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  text-align: center;
}

.right-arrow {
  grid-row: 1 / 2;
  margin-inline-start: auto;
}
/* ltr下右箭头在第三列 */
html[dir="ltr"] .right-arrow {
  grid-column: 3 / 4;
}
/* rtl下右箭头仍固定在最右侧的第一列 */
html[dir="rtl"] .right-arrow {
  grid-column: 1 / 2;
}

#toggle-direction {
  grid-row: 2 / 3;
  grid-column: 1 / 4;
}

如果你的兼容场景支持CSS :dir()伪类，也可以把html[dir="xxx"]替换为:root:dir(xxx)，写法更规范。

内容的提问来源于stack exchange，提问作者rnarcos