溢出自动不适用于 justify-content：flex-end

Question

我试图让一个元素向右对齐，并且所有溢出的元素都被隐藏但可以通过滚动条访问。

但似乎在指定时滚动条消失了justify-content: flex-end。为什么会这样，我该如何解决？

这是演示：https : //jsfiddle.net/efguz4mp/1/

.row {
  width: 100%;
  max-width: 500px;
  background: #DADADA;
  display: flex;
  overflow: auto;
  justify-content: flex-end;
}

.box {
  width: 200px;
  height: 40px;
  margin: 4px 10px;
  background: red;
  flex-shrink: 0;
}

<div class="row">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

...这里是没有的演示justify-content: flex-end;：https : //jsfiddle.net/efguz4mp

.row {
  width: 100%;
  max-width: 500px;
  background: #DADADA;
  display: flex;
  overflow: auto;
}

.box {
  width: 200px;
  height: 40px;
  margin: 4px 10px;
  background: red;
  flex-shrink: 0;
}

<div class="row">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Answer 1

当向左（或顶部）发生溢出时，不会呈现滚动，原因是 HTML 文档的正常流程是从左到右（从上到下）。

Flexbox 有一个行反转方向，这将解决这个问题，认为 2 件事随之而来：

• 需要对物品重新排序或使用内部包装器

• Ia Firefox 和 Edge 不显示滚动（可能的错误）

堆栈片段

.row {
  width: 100%;
  max-width: 500px;
  background: #DADADA;
  display: flex;
  flex-direction: row-reverse;
  overflow: auto;
}
.box {
  width: 200px;
  height: 40px;
  margin: 4px 10px;
  background: red;
  flex-shrink: 0;
}

/* no wrapper */
.row > .box:nth-child(1) { order: 6; }
.row > .box:nth-child(2) { order: 5; }
.row > .box:nth-child(3) { order: 4; }
.row > .box:nth-child(4) { order: 3; }
.row > .box:nth-child(5) { order: 2; }
.row > .box:nth-child(6) { order: 1; }

/* wrapper */
.inner {
  display: flex;
}

<div class="row">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>

<div><br><br></div>

<div class="row">
  <div class="inner">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
  </div>
</div>

可能的解决方法是：

• 使用direction: rtl来改变水流方向

.row {
  width: 100%;
  max-width: 500px;
  background: #DADADA;
  display: flex;
  overflow: auto;
  direction: rtl;
}
.inner {
  display: flex;
  direction: ltr;
}
.box {
  width: 200px;
  height: 40px;
  margin: 4px 10px;
  background: red;
  flex-shrink: 0;
}

<div class="row">
  <div class="inner">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
  </div>
</div>

• 使用transform翻转row元素

.row {
  width: 100%;
  max-width: 500px;
  background: #DADADA;
  display: flex;
  overflow: auto;
  transform: scale(-1,1);        /*  flip horizontally  */
}
.inner {
  display: flex;
  transform: scale(-1,1);        /*  reset so items is not backwards  */
}
.box {
  width: 200px;
  height: 40px;
  margin: 4px 10px;
  background: red;
  flex-shrink: 0;
}

<div class="row">
  <div class="inner">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
  </div>
</div>

• 在页面加载时使用脚本向右滚动

window.addEventListener("load", function(e) {
  var el = document.querySelector(".row");
  el.scrollLeft = el.scrollWidth;
});

.row {
  width: 100%;
  max-width: 500px;
  background: #DADADA;
  display: flex;
  overflow: auto;
}
.box {
  width: 200px;
  height: 40px;
  margin: 4px 10px;
  background: red;
  flex-shrink: 0;
}

<div class="row">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>