时间戳

首页 > 解决方案 > Flexbox - 在自己的行上有项目，但只有 50% 宽

html - Flexbox - 在自己的行上有项目，但只有 50% 宽

问题描述

我有一个表格，类似于这个布局：

.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) 中的某些东西会是理想的。

有没有一种很好的灵活方式来实现这一点？

有任何想法吗？

干杯

标签： htmlcssflexbox

解决方案

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

http://jsfiddle.net/1m8er2cx/

祝你好运！

推荐阅读