Html Flexbox与rtl

我有以下布局，但在rtl复制按钮去左边。我如何将复制按钮保持在右侧，就像它不是rtl一样

我在这里尝试了一些解决方案，但无法成功：

.data{
display:flex；/*默认情况下内联显示flex项（子项）*/
对齐项目：flex start；/*垂直对齐/可选但推荐/如果您不希望flex项目在高度上匹配，默认情况下会匹配（默认值为stretch，使其填充flex容器高度，并且所有项目的高度由“最高”项目的高度决定）/您也可以尝试使用“中心”的值*/
最大宽度：400px；
方向：rtl；
}
.代码{
颜色：#fff；
保证金：0；
填充：8px！重要；
线高：1.2；
字体大小：11px；
背景:#bbb ;；
边框：1px实心#333；
单词包装：打断单词；
/*浮动：左；不必要*/
}
.复制{
颜色：#ccc；
/*显示：内联块；不需要*/
填充：3px！重要；
字体大小：12px；
光标：指针；
边框：1px实心#999；
/*浮动：对；没有必要*/
左边距：10px；/*设计用途*/
}

present molestie。南威尼斯人酒后驾车。多洛万岁。整数水平。普罗因猫。Maecenas non nisl eu mi hendrerit fringilla
复制

使用该属性

默认情况下，所有弹性项都设置为

顺序：0

，这意味着它们在源代码中的外观决定了它们在布局中的顺序

您可以使用正整数和负整数更改flex项的视觉顺序

.data{
显示器：flex；
调整项目：灵活启动；
最大宽度：400px；
方向：rtl；
}
.代码{
颜色：#fff；
保证金：0；
填充：8px！重要；
线高：1.2；
字体大小：11px；
背景:#bbb ;；
边框：1px实心#333；
单词包装：打断单词；
}
.复制{
订单：-1；/*新*/
颜色：#ccc；
填充：3px！重要；
字体大小：12px；
光标：指针；
边框：1px实心#999；
}

present molestie。南威尼斯人酒后驾车。多洛万岁。整数水平。普罗因猫。Maecenas non nisl eu mi hendrerit fringilla
复制

您只需将

柔性方向：行反向

应用于您的柔性容器即可。在这种情况下，您不必为每个flex项目设置

订单

.data{
display:flex；/*默认情况下内联显示flex项（子项）*/
对齐项目：flex start；/*垂直对齐/可选但推荐/如果您不希望flex项目在高度上匹配，默认情况下会匹配（默认值为stretch，使其填充flex容器高度，并且所有项目的高度由“最高”项目的高度决定）/您也可以尝试使用“中心”的值*/
最大宽度：400px；
弯曲方向：行反向；/*新*/
}
.代码{
颜色：#fff；
保证金：0；
填充：8px！重要；
线高：1.2；
字体大小：11px；
背景:#bbb ;；
边框：1px实心#333；
单词包装：打断单词；
/*浮动：左；不必要*/
}
.复制{
颜色：#ccc；
/*显示：内联块；不需要*/
填充：3px！重要；
字体大小：12px；
光标：指针；
边框：1px实心#999；
/*浮动：对；没有必要*/
左边距：10px；/*设计用途*/
}

present molestie。南威尼斯人酒后驾车。多洛万岁。整数水平。普罗因猫。Maecenas non nisl eu mi hendrerit fringilla
复制

感谢10亿-订单：-1；/*新*/救生圈