6

我有一个布局，由一个包含一堆项目的有序列表组成。

所有项目都具有一致的宽度和高度 - 除了第一个项目 - 宽 (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 网格解决方法感兴趣）

4

1 回答 1

5

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

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

使用CSS 网格布局模块，这非常容易生成：

基本上相关代码归结为：

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) 类似于弹性盒。

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 的这篇文章）

于 2017-03-23T22:13:14.337 回答