3 колонки жидкости flexbox и RTL

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

У меня есть 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>

Answer 2

Вы можете просто поставить 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>