带有flexbox布局的大型第一项？

Question

我的布局包含一个包含大量项目的单个有序列表。

所有物品的宽度和高度都一致 - 第一项除外 - 宽（3x）更宽，（2x）更高。它看起来像这样：

ol {
  padding:0;
  margin:0;
  min-width: 488px;
}
li {
  list-style: none;
  width: 150px;
  padding-bottom: 16.66%;
  border: 5px solid tomato;
  display: inline-block;
}
li:first-child {
  float:left;
  width: 478px;
  border-color: green;
  padding-bottom: 34.25%;
  margin: 0 4px 4px 0;
}

<ol>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

Codepen Demo（调整视口大小以查看效果）

目前，我正在使用浮动和内联块来实现布局，但我想使用flexbox，因为flexbox提供了一些额外的功能。

我做了几次尝试，但没有成功 -

尝试＃1 - Codepen

ol {
  /* ... */
  display: flex;
  flex-wrap: wrap;
}

尝试＃2 - Codepen

在列表前使用浮动来保护第一个大型列表项的空间

然后在第一个列表项上设置显示绝对值。

在两次尝试中，第一行中的红色框都会拉伸以填充第一个项目的高度。

这可能吗？

（如果没有，那么我会对CSS网格解决方法感兴趣）

Answer 1

因此很清楚Flexbox无法生成这样的布局。所以我将回答这部分问题：

  

如果没有，那么我会对CSS网格解决方法感兴趣

使用CSS Grid Layout Module，这非常容易制作：

基本上相关的代码归结为：

Codepen Demo（调整大小以查看效果）

ul {
  display: grid; /* (1) */
  grid-template-columns: 120px 120px repeat(auto-fill, 120px); /* (2) */
  grid-template-rows: repeat(auto-fill, 150px); /* (3) */
  grid-gap: 1rem; /* (4) */
  justify-content: space-between; /* (5) */
}
li:first-child {
  grid-column: 1 / 4; /* (6) */
  grid-row:  1 / 3; /* (7) */
}

1）使容器元素成为网格容器

2）将网格设置为至少3列宽度为120px的列。 （auto-fill值用于响应式布局。）

3）将网格设置为150px高行。

4）为网格行和列设置间隙/檐槽 - 这里，因为需要一个＆＃39;空格 - ＆＃39;布局 - 差距实际上是最小差距，因为它会在必要时增长。

5）与flexbox类似。

6）占据前三列

7）占据前两行

＆＃13;

＆＃13;

body {
  margin: 0;
}
ul {
  display: grid;
  grid-template-columns: 120px 120px repeat(auto-fill, 120px);
  grid-template-rows: repeat(auto-fill, 150px);
  grid-gap: 1rem;
  justify-content: space-between;
  
  /* boring properties: */
  list-style: none;
  width: 90vw;
  height: 90vh;
  margin: 4vh auto;
  border: 5px solid green;
  padding: 0;
  overflow: auto;
}
li {
  background: tomato;
  min-height: 150px;
}
li:first-child {
  grid-column: 1 / 4;
  grid-row:  1 / 3; 
}

＆＃13;

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

<小时/>

浏览器支持 - Caniuse

目前受Chrome（Blink）和Firefox的支持，得到IE和Edge的部分支持（见Rachel Andrew的this post）