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

Question

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

我尝试过

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

有没有办法做同样的事情？

Answer 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（ltr），则使用flex-direction: row会向右对齐；如果使用flex-direction: row-reverse，则它将向左对齐]（rtl）。