Flexbox和rtl

Question

我有以下布局，但是在rtl复制按钮向左移动。如何保持右侧的复制按钮，就像它没有rtl一样？

我在这里尝试了一些解决方案，但我无法使其发挥作用：flexbox align column left and right

＆＃13;

＆＃13;

.data {
  display: flex; /* displays flex-items (children) inline by default */
  align-items: flex-start; /* vertical alignment / optional but recommended / if you don't want that flex-items match in height, which by default they do (default value of stretch, which makes them fill the flex-containers height and where the height of all items is dictated by the height of the "tallest" one) / you can also try the value of center */
  max-width: 400px;
  direction: rtl;
}

.code {
  color: #fff;
  margin: 0;
  padding: 8px !important;
  line-height: 1.2;
  font-size: 11px;
  background: #bbb;
  border: 1px solid #333;
  word-wrap: break-word;
  /*float: left; not necessary*/
}

.copy {
  color: #ccc;
  /*display: inline-block; not necessary*/
  padding: 3px !important;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid #999;
  /*float: right; not necessary*/
  margin-left: 10px; /* design purposes */
}

＆＃13;

<div class="data">
  <p class="code">Praesent molestie. Nunc Venenatis Sapien Ultrices Dui. Vivamus dolor. Integer vel ante. Proin felis. Maecenas non nisl eu mi hendrerit fringilla.</p>
  <div class="copy">COPY</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用order属性。

默认情况下，所有弹性项目都设置为order: 0，这意味着它们在源中的外观决定了它们在布局中的顺序。

您可以使用正整数和负整数更改弹性项目的视觉顺序。

.data {
  display: flex;
  align-items: flex-start;
  max-width: 400px;
  direction: rtl;
}

.code {
  color: #fff;
  margin: 0;
  padding: 8px !important;
  line-height: 1.2;
  font-size: 11px;
  background: #bbb;
  border: 1px solid #333;
  word-wrap: break-word;
}

.copy {
  order: -1; /* NEW */
  color: #ccc;
  padding: 3px !important;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid #999;
}

<div class="data">
  <p class="code">Praesent molestie. Nunc Venenatis Sapien Ultrices Dui. Vivamus dolor. Integer vel ante. Proin felis. Maecenas non nisl eu mi hendrerit fringilla.</p>
  <div class="copy">COPY</div>
</div>

以下是更完整的解释和示例：https://stackoverflow.com/a/36118012/3597276

当然，您也可以通过简单地切换元素的顺序来实现您想要的目标：

.data {
  display: flex;
  align-items: flex-start;
  max-width: 400px;
  direction: rtl;
}

.code {
  color: #fff;
  margin: 0;
  padding: 8px !important;
  line-height: 1.2;
  font-size: 11px;
  background: #bbb;
  border: 1px solid #333;
  word-wrap: break-word;
}

.copy {
  color: #ccc;
  padding: 3px !important;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid #999;
}

<div class="data">
  <div class="copy">COPY</div><!-- now this element is listed first -->
  <p class="code">Praesent molestie. Nunc Venenatis Sapien Ultrices Dui. Vivamus dolor. Integer vel ante. Proin felis. Maecenas non nisl eu mi hendrerit fringilla.</p>
</div>

Answer 2

您只需将flex-direction: row-reverse应用于您的Flex容器即可。在这种情况下，您不必为每个弹性项目设置order。

＆＃13;

＆＃13;

.data {
  display: flex; /* displays flex-items (children) inline by default */
  align-items: flex-start; /* vertical alignment / optional but recommended / if you don't want that flex-items match in height, which by default they do (default value of stretch, which makes them fill the flex-containers height and where the height of all items is dictated by the height of the "tallest" one) / you can also try the value of center */
  max-width: 400px;
  flex-direction: row-reverse; /* new */
}

.code {
  color: #fff;
  margin: 0;
  padding: 8px !important;
  line-height: 1.2;
  font-size: 11px;
  background: #bbb;
  border: 1px solid #333;
  word-wrap: break-word;
  /*float: left; not necessary*/
}

.copy {
  color: #ccc;
  /*display: inline-block; not necessary*/
  padding: 3px !important;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid #999;
  /*float: right; not necessary*/
  margin-left: 10px; /* design purposes */
}

＆＃13;

<div class="data">
  <p class="code">Praesent molestie. Nunc Venenatis Sapien Ultrices Dui. Vivamus dolor. Integer vel ante. Proin felis. Maecenas non nisl eu mi hendrerit fringilla.</p>
  <div class="copy">COPY</div>
</div>

＆＃13;

＆＃13;

＆＃13;

请注意direction: rtl应该用于从右到左书写的语言（如希伯来语或阿拉伯语），而不是用于反转布局。