Question

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

#container {
  display: flex; /* displays flex-items (children) inline */
  direction:rtl;/* just for presentation, this would be on html element */
}

#leftcol {
  border: 1px solid #0f0;
}

#centercol {
  flex: 1; /* takes the remaining horizontal space */
  border: 1px solid #000;
}

#rightcol {
  border: 1px solid #0f0;
}

.box {
  width: 50px;
  height: 20px;
  background: red;
  float: left;
}

<div id="container">
  <div id="leftcol">
    <div class="box">a</div>
    <div class="box">b</div>
    <div class="box">c</div>
  </div>
  <div id="centercol">
    center
  </div>
  <div id="rightcol">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
  </div>
</div>

Answer 1

您可以将flex-direction: row-reverse而不是direction: ltr放在容器元素上。

#container {
  display: flex; /* displays flex-items (children) inline */
  direction:rtl;/* just for presentation, this would be on html element */
  flex-direction: row-reverse;
}

#leftcol {
  border: 1px solid #0f0;
}

#centercol {
  flex: 1; /* takes the remaining horizontal space */
  border: 1px solid #000;
}

#rightcol {
  border: 1px solid #0f0;
}

.box {
  width: 50px;
  height: 20px;
  background: red;
  float: left;
}

<div id="container">
  <div id="leftcol">
    <div class="box">a</div>
    <div class="box">b</div>
    <div class="box">c</div>
  </div>
  <div id="centercol">
    center
  </div>
  <div id="rightcol">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
  </div>
</div>

Answer 2

我有3个流体柱，沿ltr方向，它们从左到右走我想要，但是在rtl方向上，他们颠倒了我想要的顺序防止。

您必须在flex-direction: row-reverse中使用#container

有没有一种方法可以防止顺序反转而无需指定方向：关于容器元素的LTR？（因为然后容器子项继承这种我不想要的行为）

您必须在flex-direction: row-reverse中使用#container>div（#container的直接子代）

html {
  direction: rtl;
}

#container {
  display: flex;
  flex-direction: row-reverse
}

#leftcol {
  border: 1px solid #0f0;
}

#centercol {
  flex: 1;
  border: 1px solid #000;
}

#rightcol {
  border: 1px solid #0f0;
}

#container>div {
  /* to avoid float:left in .box */
  display: flex;
  flex-direction: row-reverse
}

.box {
  width: 50px;
  height: 20px;
  background: red;
}

<div id="container">
  <div id="leftcol">
    <div class="box">a</div>
    <div class="box">b</div>
    <div class="box">c</div>
  </div>
  <div id="centercol">
    center
  </div>
  <div id="rightcol">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
  </div>
</div>

3列流体Flexbox和RTL

2 个答案: