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

您可以将 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

I have 3 fluid columns, in direction ltr, they go left to right which I want, but on direction rtl, they reverse order which I would like to prevent.

您必须在 #container

flex-direction: row-reverse

Is there a way to prevent order reverse without specifying direction: ltr on container element? (because then container children inherit this behavior which I dont want)

您必须在 #container>div 中使用 flex-direction: row-reverse（#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

3 columns fluid flexbox and rtl

html

css

direction

flexbox