如何使用Flex创建自定义马赛克

Question

我正在尝试使用flex创建一个自定义马赛克，如下所示：

除框4的高度和宽度加倍外，所有框的宽度均为父容器的三分之一。

我设法达到以下条件：

#push-group-element ul,
#push-group-element ul li{
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex: 1 0 33.33%;
  justify-content: center;
}

.mosaic-container {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  list-style-type: none;
  background: red;
  flex-wrap: wrap;
}
.mosaic-item {
  position: relative;
  padding: 10px;
  background: green;
  outline: 1px solid black;
}
.mosaic-item {
  height: 150px;
}
#push-group-element .mosaic-item:nth-child(4) {
  flex: 1 0 66.6%;
  height: 300px;
}

<div id="push-group-element" style="width:600px">
  <ul class="mosaic-container">
    <li class="mosaic-item item-small" data-item="1">1</li>
    <li class="mosaic-item item-small" data-item="2">2</li>
    <li class="mosaic-item item-small" data-item="3">3</li>
    <li class="mosaic-item item-big" data-item="4">4</li>
    <li class="mosaic-item item-small" data-item="5">5</li>
    <li class="mosaic-item item-small" data-item="6">6</li>
    <li class="mosaic-item item-small" data-item="7">7</li>
    <li class="mosaic-item item-small" data-item="8">8</li>
    <li class="mosaic-item item-small" data-item="8">9</li>
  </ul>
</div>

我的问题是6号框没有换行并落到下一行，因此创建了一个新的不需要的行，其中包含9号框和一个应该放置6号的空心空间。

总结一下： 根据附上的草图，如何使5号和7 8 9号以下的盒子6包装在同一行中。 预先谢谢你

Answer 1

添加如下所示的span元素：

#push-group-element ul,
#push-group-element ul li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex: 1 0 33.33%;
  justify-content: center;
}

.mosaic-container {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  list-style-type: none;
  background: red;
  flex-wrap: wrap;
}

.mosaic-item {
  position: relative;
  padding: 10px;
  background: green;
  outline: 1px solid black;
}

.mosaic-item {
  height: 150px;
}

#push-group-element .mosaic-item:nth-child(4) {
  flex: 1 0 66.6%;
  height: 300px;
}

<div id="push-group-element" style="width:600px">
  <ul class="mosaic-container">
    <li class="mosaic-item item-small" data-item="1">1</li>
    <li class="mosaic-item item-small" data-item="2">2</li>
    <li class="mosaic-item item-small" data-item="3">3</li>
    <li class="mosaic-item item-big" data-item="4">4</li>
    <span style="width: 33.3%;">
      <li class="mosaic-item item-small" data-item="5">5</li>
      <li class="mosaic-item item-small" data-item="6">6</li>
    </span>
    <li class="mosaic-item item-small" data-item="7">7</li>
    <li class="mosaic-item item-small" data-item="8">8</li>
    <li class="mosaic-item item-small" data-item="8">9</li>
  </ul>
</div>

OR 使用float属性而不是flex可以得到类似的结果（无需更改HTML strucutre）。

#push-group-element ul,
#push-group-element ul li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  justify-content: center;
  width: 33.3%;
  float: left;
}

#push-group-element ul {
  width: 100%;
}

.mosaic-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  list-style-type: none;
  background: red;
}

.mosaic-item {
  position: relative;
  padding: 10px;
  background: green;
  outline: 1px solid black;
}

.mosaic-item {
  height: 150px;
}

#push-group-element .mosaic-item:nth-child(4) {
  width: 66.6%;
  height: 300px;
}

<div id="push-group-element" style="width:600px">
  <ul class="mosaic-container">
    <li class="mosaic-item item-small" data-item="1">1</li>
    <li class="mosaic-item item-small" data-item="2">2</li>
    <li class="mosaic-item item-small" data-item="3">3</li>
    <li class="mosaic-item item-big" data-item="4">4</li>
    <li class="mosaic-item item-small" data-item="5">5</li>
    <li class="mosaic-item item-small" data-item="6">6</li>
    <li class="mosaic-item item-small" data-item="7">7</li>
    <li class="mosaic-item item-small" data-item="8">8</li>
    <li class="mosaic-item item-small" data-item="8">9</li>
  </ul>
</div>