Как выровнять элемент HTML по начальной или конечной позиции вместо левой или правой - PullRequest
Новая
       11

Как выровнять элемент HTML по начальной или конечной позиции вместо левой или правой

1 голос
/ 25 сентября 2019

Как выровнять элемент HTML по начальной или конечной позиции вместо левой или правой, как Android XML.Я хочу расположить элемент справа, когда направление LTR (слева направо), и установить позицию слева, если направление RTL.

Я пробовал 

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

Есть ли способ сделатьто же самое?

1 Ответ

1 голос
/ 25 сентября 2019 

.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), и будет выравниваться влево, если вы используете flex-direction: row-reverse (rtl).

Обновление

Все вышеперечисленное верно, но если вы укажете dir для элемента, гибкий контейнер автоматически определит направление.(если вы установите 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>
...