Question

我有一个类似于此布局的表格：

.flex-parent {
  display: flex;
  flex-wrap: wrap;
}

.flex-child {
  flex-basis: 50%;
}

.flex-child:nth-child(-n+3) {
  flex: 1 0 100%;
}

.flex-child:nth-last-child(-n+3) {
  flex-basis: 50%;
  /* hacks to force element onto next line below */
  /* margin-right: 1px; */
  /* or */
  /* flex-basis: 51% */
}

<div class="flex-parent">
  <div class="flex-child">
    <div style="background-color: #46DBFF;">1</div>
  </div>
  <div class="flex-child">
    <div style="background-color: rgb(55, 165, 192);">2</div>
  </div>
  <div class="flex-child">
    <div style="background-color: #46DBFF;">3</div>
  </div>
  <div class="flex-child">
    <div style="background-color: rgb(55, 165, 192);">4</div>
  </div>
  <div class="flex-child">
    <div style="background-color: #46DBFF;">5</div>
  </div>
  <div class="flex-child">
    <div style="background-color: rgb(55, 165, 192);">6</div>
  </div>
</div>

我想要的是第5项位于第4项之下，而不是紧挨着它而没有任何狡猾的骇客

我不能对html或css进行太多更改，但是类.flex-child：nth-last-child（-n + 3）中的某些东西是理想的。

有没有一种灵活的方法可以实现这一目标？

有什么想法吗？

欢呼

Answer 1

您可以将flex-parent的flex-direction更改为column，然后将flex-child元素的宽度更改为50％。这样一来，这并不是一个肮脏的技巧，您不必进行太多更改。

.flex-parent {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.flex-child:nth-last-child(-n+3) {
    width: 50%;
}

（我删除了所有不必要的css definitons）

http://jsfiddle.net/1m8er2cx/

祝你好运！

Answer 2

您可以考虑使用伪元素隐藏元素，然后调整顺序：

.flex-parent {
    display: flex;
    flex-wrap: wrap;
}

.flex-child {
    flex-basis: 50%;
}

.flex-child:nth-child(-n+3) {
    flex: 1 0 100%;
}
.flex-child:nth-last-child(-n+3) {
    order:2;
}
.flex-parent:after {
  content:"";
  width:1px;
  order:1;
}

<div class="flex-parent">
    <div class="flex-child">
        <div style="background-color: #46DBFF;">1</div>
    </div>
    <div class="flex-child">
        <div style="background-color: rgb(55, 165, 192);">2</div>
    </div>
    <div class="flex-child">
        <div style="background-color: #46DBFF;">3</div>
    </div>
    <div class="flex-child">
        <div style="background-color: rgb(55, 165, 192);">4</div>
    </div>
    <div class="flex-child">
        <div style="background-color: #46DBFF;">5</div>
    </div>
    <div class="flex-child">
        <div style="background-color: rgb(55, 165, 192);">6</div>
    </div>
</div>

Flexbox-在自己的生产线上放置物品，但宽度只有50％

2 个答案: