如何将 HTML 元素对齐到开始或结束位置而不是左或右答案

【问题标题】：How to align a HTML element to start or end position instead left or right如何将 HTML 元素对齐到开始或结束位置而不是左或右
【发布时间】：2019-09-25 13:54:41
【问题描述】：

如何将 HTML 元素对齐到开始或结束位置，而不是像 Android XML 那样向左或向右对齐。我想在 LTR（从左到右）方向时将元素定位在右侧，在 RTL 方向时将位置设置在左侧。

我试过了

.element{float:end;}
.element{position: absolute; end: 10px;}

有没有办法做到这一点？

【问题讨论】：

而不是end:，您是否尝试过使用绝对位置的left:0 或right:0？另外，您可以查看display:flex 和align-self: flex-end。 float值可以是left或right，没有end
@CalvinNunes 我试过了：绝对位置，但它总是在 LTR 和 RTL 右侧对齐
请清楚说明您要做什么，添加预期的输出图像会有所帮助
:dir() 伪类目前浏览器支持较差；但是，如果您使用 HTML dir 属性在元素或某些祖先上指定了文本方向，则可以将其与属性选择器一起使用。所以你可以指定right而不是left，然后用auto覆盖left。
好的，我想我得到了你想要的，但我认为你需要一个 CSS 预编译器或一些 JS 函数。看：stackoverflow.com/q/52516820/8732818、stackoverflow.com/q/48424311/8732818和stackoverflow.com/q/40779933/8732818

标签： html css alignment right-to-left

【解决方案1】：

.flex-container {
  display: flex;
  width: 300px;
  height: 100px;
  background-color: gray;
  justify-content: flex-end;
  margin: 20px;
  flex-direction: row /*default*/
}
span {
  width: 100px;
  height: 100px;
  background-color: red;
}

<div class="flex-container" dir="ltr">
  <span></span>
</div>
<div class="flex-container" dir="rtl">
  <span></span>
</div>

使用 flex-direction 和值 row 表示从左到右，row-reverse 表示从右到左。

使用 justify-content 对齐主轴中的项目（flex-direction 的值为 row 或 row-reverse - 主轴：x、column 或 column-reverse - 主轴：y）。其中flex-end 或flex-start 将表示轴方向的结束或开始 - 如果使用flex-end，则使用flex-direction: row (ltr) 将向右对齐，如果使用@987654336，它将向左对齐@ (rtl)。

更新

上面说的都是对的，但是如果你在一个元素上指定dir，flex容器会自动检测方向。（如果你设置dir="rtl"，它的行为就像flex-direction: row-reverse而不实际设置它）

知道了这个，你可以查一下：

window.onload = () => {
  if (navigator.language/*=== rtlLanguage*/) {
    document.body.dir = "rtl";
  }
};

.flex-container {
  display: flex;
  width: 300px;
  height: 100px;
  background-color: gray;
  justify-content: flex-end;
  margin: 20px;
  flex-direction: row /*default*/
}
span {
  width: 100px;
  height: 100px;
  background-color: red;
}

<body>
  <div class="flex-container">
    <span></span>
  </div>
</body>

【讨论】：

谢谢，这将解决我 50% 的问题，有没有办法从用户的浏览器设置中添加 ltr/rtl 类名？
如我所见，如果你把 dir 属性放在一个元素上，flexbox 会自动检测方向。请参阅我更新的示例。
再次更新，现在检查浏览器的语言。希望对您有所帮助。