Question

我使用带有参数的flexbox：flex-direction：column，flex-wrap：wrap。问题是包装时出现在屏幕外的项目...有任何想法如何使用flexbox（或mbe其他想法）这样做？我不会用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>

Answer 1

这很有效。 flex-flow: column wrap-reverse;

＆＃13;

    .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;
    }

＆＃13;

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

＆＃13;

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>

Flexbox列从右到左方向

2 个答案: