html - CSS flex : Display like rowspan and colspan

Question

我正在尝试用 CSS 构建一些东西，但我遇到了一个错误。

与其余元素相比，我的 flex 中有一些元素需要双倍宽度和双倍高度。

请在此处查看我现在得到的示例。 http://jsfiddle.net/pJy66/25/

我想这样显示

(1)(2)(3)(3)
(4)(5)(3)(3)
(6)(6)(7)(8)
(6)(6)(9)(0)

但是正如你在 fiddle 中看到的那样，它似乎清除了元素所以它显示为这样

(1)(2)(3)(3)
( )( )(3)(3)
(4)(5)(6)(7)
(8)(8)(9)(0)
(8)(8)( )( )

那么我可以做一些 rowspan 来让元素 3 左边的 4-5 个元素吗？

.foo {
    display:flex;
    flex-flow: row wrap;
    justify-content: center;
}

.foo div{
  background:#888;
  width:25%;
  height:50px;
}

.foo .b1{background:#000;}
.foo .b2{background:#555;}
.foo .b3{background:#111;}
.foo .b4{background:#666;}
.foo .b5{background:#222;}
.foo .b6{background:#777;}
.foo .b7{background:#333;}
.foo .b8{background:#888;}
.foo .b9{background:#444;}
.foo .b10{background:#999;}

.foo .b1, .foo .b8{
  height:100px;
  width:50%
}

<div class="foo">
  <div class="b1"></div>
  <div class="b2"></div>
  <div class="b3"></div>
  <div class="b4"></div>
  <div class="b5"></div>
  <div class="b6"></div>
  <div class="b7"></div>
  <div class="b8"></div>
  <div class="b9"></div>
  <div class="b10"></div>
</div>

Answer 1

将主容器分成四组，然后在必要时使用嵌套容器。

.foo {
  display: flex;
  flex-flow: row wrap;
  color: white;
  font-weight: bold;
}

.foo > div {
  flex: 0 0 50%;
  height: 100px;
  display: flex;
  flex-flow: row wrap;
}

.group1 > div, .group4 > div {
  flex: 0 0 50%;
  height: 50px;
}

.foo .b1  { background: #000;  }
.foo .b2  { background: #555;  }
.foo .b3  { background: green; }
.foo .b4  { background: #666;  }
.foo .b5  { background: #222;  }
.foo .b6  { background: red;   }
.foo .b7  { background: #333;  }
.foo .b8  { background: #888;  }
.foo .b9  { background: #444;  }
.foo .b10 { background: #999;  }

<div class="foo">

  <div class="group1">
    <div class="b1">1</div>
    <div class="b2">2</div>
    <div class="b4">4</div>
    <div class="b5">5</div>
  </div>

  <div class="group2 b3">3</div>

  <div class="group3 b6">6</div>

  <div class="group4">
    <div class="b7">7</div>
    <div class="b8">8</div>
    <div class="b9">9</div>
    <div class="b10">10</div>
  </div>

</div>

jsFiddle

这是我为计算器键盘布局所做的类似操作:

• Calculator keypad layout with flexbox