Html 3柱流体flexbox和rtl

我有3个流体柱，在ltr方向，它们从左到右，我想要，但在rtl方向，它们的顺序相反，我想阻止。有没有一种方法可以在不指定容器元素上的direction:ltr的情况下防止订单反转？（因为容器子对象继承了我不想要的行为）

#容器{
显示：flex；/*以内联方式显示flex项（子项）*/
方向：rtl；/*仅用于演示，这将在html元素上*/
}
#左撇子{
边框：1px实心#0f0；
}
#森特科尔{
flex:1；/*占用剩余的水平空间*/
边框：1px实心#000；
}
#rightcol{
边框：1px实心#0f0；
}
.盒子{
宽度：50px；
高度：20px；
背景：红色；
浮动：左；
}

A.
B
C
居中
1.
2.
3.
4.

您只需在容器元素上放置

柔性方向：行反向

，而不是

方向：ltr

#容器{
显示：flex；/*以内联方式显示flex项（子项）*/
方向：rtl；/*仅用于演示，这将在html元素上*/
弯曲方向：行反向；
}
#左撇子{
边框：1px实心#0f0；
}
#森特科尔{
flex:1；/*占用剩余的水平空间*/
边框：1px实心#000；
}
#rightcol{
边框：1px实心#0f0；
}
.盒子{
宽度：50px；
高度：20px；
背景：红色；
浮动：左；
}

A.
B
C
居中
1.
2.
3.
4.

您只需在容器元素上放置

柔性方向：行反向

，而不是

方向：ltr

#容器{
显示：flex；/*以内联方式显示flex项（子项）*/
方向：rtl；/*仅用于演示，这将在html元素上*/
弯曲方向：行反向；
}
#左撇子{
边框：1px实心#0f0；
}
#森特科尔{
flex:1；/*占用剩余的水平空间*/
边框：1px实心#000；
}
#rightcol{
边框：1px实心#0f0；
}
.盒子{
宽度：50px；
高度：20px；
背景：红色；
浮动：左；
}

A.
B
C
居中
1.
2.
3.
4.

我有3个流体柱，在ltr方向，它们从左到右 我想，但在rtl方向上，它们的顺序和我想的相反 阻止

• 在

  #container

有没有办法在不指定方向的情况下防止顺序颠倒： 容器元素上的ltr？（因为容器子对象继承 这是我不想要的行为）

• 您必须在

  #container>div

  中使用

  弹性方向：行反转（container

  的直接子级）

html{
方向：rtl；
}
#容器{
显示器：flex；
弯曲方向：行反向
}
#左撇子{
边框：1px实心#0f0；
}
#森特科尔{
弹性：1；
边框：1px实心#000；
}
#rightcol{
边框：1px实心#0f0；
}
#容器>分区{
/*避免浮动：保留在.box中*/
显示器：flex；
弯曲方向：行反向
}
.盒子{
宽度：50px；
高度：20px；
背景：红色；
}

A.
B
C
居中
1.
2.
3.
4.

我有3个流体柱，在ltr方向，它们从左到右 我想，但在rtl方向上，它们的顺序和我想的相反 阻止

• 在

  #container

有没有办法在不指定方向的情况下防止顺序颠倒： 容器元素上的ltr？（因为容器子对象继承 这是我不想要的行为）

• 您必须在

  #container>div

  中使用

  弹性方向：行反转（container

  的直接子级）

html{
方向：rtl；
}
#容器{
显示器：flex；
弯曲方向：行反向
}
#左撇子{
边框：1px实心#0f0；
}
#森特科尔{
弹性：1；
边框：1px实心#000；
}
#rightcol{
边框：1px实心#0f0；
}
#容器>分区{
/*避免浮动：保留在.box中*/
显示器：flex；
弯曲方向：行反向
}
.盒子{
宽度：50px；
高度：20px；
背景：红色；
}

A.
B
C
居中
1.
2.
3.
4.

这不是OP wantI认为他使用（并且必须使用）方向用于语言目的（即阿拉伯语内容），而不是表达目的。所以我保持了方向，只使用了“column reverse”（应该是row reverse，我的错误）属性来更改列的顺序。但是如果容器（或父容器）没有RTL，那么列就会反转。最好仅当页面有一个属性为

dir=“rtl”

的元素作为祖先时才使用

[dir=“rtl”]#容器{flex direction:row reverse；}

作为目标。这不是OP wantI认为他为了语言目的（即阿拉伯语内容）而使用（并且必须使用）方向，而不是为了表示目的。所以我保持了方向，只使用了“column reverse”（应该是row reverse，我的错误）属性来更改列的顺序。但是如果容器（或父容器）没有RTL，那么列就会反转。最好仅当页面有一个属性为

dir=“rtl”

的元素作为祖先时，才使用

[dir=“rtl”]#容器{flex direction:row reverse；}

作为目标。是否解释更改接受答案的原因？是否解释更改接受答案的原因？