大型第一项与flexbox布局？ [英] Large first item with a flexbox layout?

问题描述

我有一个由单个有序列表组成的布局，其中包含一堆项目。所有项目具有一致的宽度和高度。第一个项目是（3x）宽，（2x）高。它看起来像这样：

  ol {padding：0;余量：0; min-width：488px;} li {list-style：none;宽度：150px;填充底：16.66％;边界：5px固体番茄; display：inline-block;} li：first-child {float：left;宽度：478px;边框颜色：绿色;填充底：34.25％; margin：0 4px 4px 0;}  

< ol> <李>< /锂> <李>< /锂> <李>< /锂> <李>< /锂> <李>< /锂> <李>< /锂> <李>< /锂> <李>< /锂> <李>< /锂> <李>< /锂> <李>< /锂> <李>< /锂> <李>< /锂> <李>< /锂> <李>< /锂> <李>< /锂> < li>< / li>< / ol>

> Codepen Demo （调整视口的效果）

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

我做了一些尝试，但没有成功 -

尝试＃1 - Codepen

  ol { 
 / * ... * / 
 display：flex; 
 flex-wrap：wrap; 
 
  

尝试＃2 - Codepen

在列表之前使用浮点数来确保第一个空间大列表项目

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

在这两次尝试中，在第一行拉伸以填充第一项的高度。

这可能吗？

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

解决方案

所以很明显flexbox不能生成这样的布局。所以我会回答这个问题的一部分：

lockquote

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

使用 CSS Grid Layout Module（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的网格。 （自动填充值用于响应式布局）

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

4）为网格行和列设置间距/间距 - 这里，因为想要一个空间布局 - 差距实际上是一个最小的差距，因为5）与flexbox类似。

6）占据前三列 / p>

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;证明内容：空间之间; / *无聊的属性：* / list-style：none;宽度：90vw;身高：90vh;保证金：4vh汽车;边框：5px纯绿色;填充：0; overflow：auto;} li {background：tomato; min-height：150px;} li：first-child {grid-column：1/4;网格行：1/3; }  

< ul> <李→1< /锂> <李→2< /锂> <李→3< /锂> <李→4< /锂> <李→5< /锂> <李→6< /锂> <李大于7< /锂> <李> 8 LT; /锂> <李> 9< /锂> <李大于10< /锂> <李> 11< /锂> <李> 12< /锂> <李> 13< /锂> <李> 14< /锂> <李→15< /锂> <李> 16< /锂> <李> 17< /锂> <李>第18版; /锂> <李> 19 LT; /锂> < li> 20< / li>< / ul>

>



浏览器支持 - Caniuse

目前由Chrome（Blink）和Firefox支持，部分支持IE和Edge（见这篇文章 Rachel Andrew）

I have a layout consisting of a single ordered list containing a bunch of items.

All items have consistent width and height - except the first item - which is (3x) wider and (2x) taller. It looks like this:

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 (Resize viewport to see effect)

Currently, i'm using floats and inline-blocks to achieve the layout, but i'd like to use flexbox because of some extra features which flexbox offers.

I have made a couple of attempts, but with no success -

Attempt #1 - Codepen

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

Attempt #2 - Codepen

Use a float before the list to secure space for the first large list item

Then set display absolute on the first list item.

In both attempts, the red boxes in the first line stretch to fill the height of the first item.

Is this possible?

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

解决方案

So it's pretty clear that flexbox can't produce a layout like this. So I'll answer this part of the question:

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

With the CSS Grid Layout Module this is surprisingly easy to produce:

Basically the relevant code boils down to this:

Codepen Demo (Resize to see the effect)

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) Make the container element a grid container

2) Set the grid with at least 3 columns of width 120px. (The auto-fill value is used for responsive layouts).

3) Set the grid with 150px high rows.

4) Set gaps/gutters for the grid rows and columns - here, since want a 'space-between' layout - the gap will actually be a minimum gap because it will grow as necessary.

5) Similar to flexbox.

6) occupy the first three columns

7) occupy the first two rows

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>

---

Browser Support - Caniuse

Currently supported by Chrome (Blink) and Firefox, with partial support from IE and Edge (See this post by Rachel Andrew)

这篇关于大型第一项与flexbox布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！