html - "End"- 对齐 CSS 中的元素

Question

我有一个元素需要正确处理从左到右和从右到左的文本。在设计中，一些元素是右对齐的。这意味着对于 rtl，它们需要左对齐。

有没有办法使用 CSS 将事物对齐到“末端”而不是“右边”？我在这里专门针对 Webkit。

我想做的事的例子:

float: end; /* instead of float: right */

或

position: absolute;
end: 0px; /* instead of right: 0px */

显然，这些都不起作用。

我知道可以为 rtl 设置样式，并使用它来将我所有的 right: 0px; 更改为 left: 0px。我正在寻找更好的解决方案。

---

编辑:

在某些情况下，页面上到处都是元素，可以做各种各样的事情。但我现在专门研究的是菜单栏。它的左边有一些静态按钮，中间有一个可变面包屑，右边有一些静态按钮。面包屑应该像正常文本一样流动(视情况从左到右或从右到左)。

Answer 1

Flexbox 的设计不仅仅考虑了典型的 LTR 书写方式。在对齐和对齐方面，它具有像 flex-start 和 flex-end 这样的语言。根据您描述相关元素的方式，可能没有必要使用它们。

http://codepen.io/cimmanon/pen/bdynv (包含 LTR 和 RTL 示例)

<nav class="rtl">
  <img src="http://placekitten.com/100/50" alt="Cat Button" />
  <img src="http://placekitten.com/80/50" alt="Other Cat Button" />

  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>

  <img src="http://placekitten.com/100/50" alt="Cat Button" />
  <img src="http://placekitten.com/80/50" alt="Other Cat Button" />
</nav>

CSS:

nav {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  /* optional */
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

ul {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
ul li {
  display: inline-block;
}

.rtl {
  direction: rtl;
}

请注意，使用表格/表格单元显示属性可以实现同样的效果，但它需要额外的元素。