Question

我正在尝试用CSS构建一些东西而且我遇到了一个bug。

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

请参阅此处的示例，了解我现在的情况。 http://jsfiddle.net/pJy66/25/

我想像这样显示它

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

但正如你可以在小提琴中看到的那样，它似乎清除了这些元素，因此它显示为

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

那么我可以做某种行距来在元素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

这与我为计算器键盘布局做的类似：

Make a calculator keypad layout with flexbox

Answer 2

你必须嵌套flex容器，即将一些flex-items（child）定义为flex-container（parent）本身。

在你的例子中......

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

... 1,2,4,5和7,8,9,0将嵌套在flex-items A和B中，所以外部结构将是

A 3
6 B

......，在里面，A将由

组成

1 2
4 5

......而B将由

组成

7 8
9 0

整个容器A和B将具有display: flex和flex-wrap: wrap，并为较小的元素设置适当的宽度和flex。

CSS Flex：像rowspan和colspan一样显示

2 个答案:

jsFiddle