从右到左的Flexbox列方向

Question

我想要创建这个: http://imgur.com/G2TpjDR 我拥有的是: https://jsfiddle.net/tzayffsv/ 我使用flexbox并设置参数: flex-direction: column, flex-wrap: wrap. 问题是当换行时，项目会超出屏幕... 有没有使用flexbox（或其他方法）解决此问题的想法？ 我不希望使用JavaScript和将项目定位为绝对位置的解决方案。

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
</div>

- Grammka

---

我非常确定使用flexbox本地无法实现这一点。这不是换行的工作方式...我很想看到一个解决方案。但如果您反转结构，可以实现类似的效果-https://jsfiddle.net/tdy4rbw5/1/ - Paulie_D

Answer 1

这个是有效的。flex-flow: column wrap-reverse;

    .box {
    height:200px;
    width:300px;
    background:grey;
    display: flex;
    flex-flow: column wrap-reverse;
    justify-content: center;
    align-content: flex-start;
    align-items: flex-end;
    }
    
    .item {
    flex: 0 1 auto;
    align-self: auto;
    min-width: 0;
    min-height: 40%;
    border:1px solid black;
    }

    <div class="box">
      <div class="item">A</div>
      <div class="item">B</div>
      <div class="item">C</div>
    </div>

- Ronnie Royston

---

你应该使用op结构，最终fork一个fiddle.. https://jsfiddle.net/tzayffsv/3/ ;) 来展示flex如所期望的那样处理它。 - G-Cyrillus

Answer 2

这与 flexbox 没有直接关系，你只需要将文本方向设为从右到左。这可以通过以下方式轻松实现：

.container {
  direction: rtl;
}

.container {
  direction: rtl;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  position: absolute;
  top: 0;
  right: 50px;
  height: 600px;
}
.item {
  width: 200px;
  height: 140px;
  line-height: 60px;
  background-color: #618ae4;
  margin-top: 10px;
  margin-left: 10px;
  text-align: center;
  font-weight: bold;
  font-size: 30px;
  color: #fff;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

- Oriol

---

@Grammka 不要忘记，你可能需要为子元素重置 direction:ltr;。 - G-Cyrillus

是的，否则默认的 text-align: start 将会靠右对齐，以及其他类似的事情。 - Oriol