css - 具有 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 (调整视口(viewport)大小以查看效果)

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

我已经尝试了几次，但都没有成功 -

尝试 #1 - Codepen

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

尝试 #2 - Codepen

在列表前使用 float 以确保第一个大列表项的空间

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

在这两次尝试中，第一行中的红色框会拉伸(stretch)以填充第一项的高度。

这可能吗？

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

Answer 1

所以很明显 flexbox 不能产生这样的布局。所以我会回答这部分问题:

If not, then I would be interested in a CSS grid workaround

随着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) 为网格行和列设置间隙/间距 - 此处，因为需要“间距”布局 - 间隙实际上是最小间隙，因为它会根据需要增大。

5) 类似于flexbox。

6)占据前三列

7) 占据前两行

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; 
}

<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>

---

浏览器支持 - Caniuse

目前由 Chrome (Blink) 和 Firefox 支持，IE 和 Edge 提供部分支持(参见 Rachel Andrew 的 this post)