具有可变高度的 css flex 网格

Question

我目前正在学习 Flex，并且有一个布局请求让我很头疼。我有大量图像，目前以 UL 的形式显示在页面上(尽管它们不一定是)。所需的布局如下所示。

桌面

+------------+------+
|            |      |
|            |      |
|            |------|
|            |      |
|            |      |
+------+-----+------+
|      |            |
|      |            |
|------|            |
|      |            |
|      |            |
+------+------------+

移动

+-------------------+
|                   |
|                   |
|                   |
|                   |
+-------------------+
|                   |
|                   |
|                   |
|                   |
+-------------------+
|                   |
|                   |
|                   |
|                   |
+-------------------+
|                   |
|                   |
|                   |
|                   |
+-------------------+
|                   |
|                   |
|                   |
|                   |
+-------------------+
|                   |
|                   |
|                   |
|                   |
+-------------------+

我似乎无法让较小的图像彼此重叠。第一个小图像位于右侧，但第二个图像换行到大图像下方的下一行。

ul {
  display: flex;
  flex-wrap: wrap;
}


/*
   FOR ILLUSTRATIVE PURPOSES ONLY.
   NOT PART OF THE OBJECTIVE
*/

ul {
  list-style: none;
  width: 650px;
}

div {
  background: red;
  height: 300px;
  width: 390px;
  margin: 5px;
}

li {
  border: 1px dotted red;
}

li:nth-child(2) div,
li:nth-child(3) div,
li:nth-child(4) div,
li:nth-child(5) div {
  width: 190px;
  height: 140px;
  background: green;
}

<ul>
   <li><div></div></li>
   <li><div></div></li>
   <li><div></div></li>
   <li><div></div></li>
   <li><div></div></li>
   <li><div></div></li>
</ul>   

( codepen )

Answer 1

最好考虑使用 CSS 网格来实现此布局，您应该考虑 ul/li 而不是内部的 div，因为它们不是网格的一部分。

ul {
   display: grid;
   grid-template-columns:1fr 1fr 1fr; /*3 columns*/
   grid-gap:5px;
   list-style: none;
   margin:0;
   padding:0;
   max-width:600px;
}

li:first-child {
   background: red;
   height: 300px; 
   grid-column:1/3; /*take 2 columns 1 - 2*/
   grid-row:1/3; /*take 2 rows 1 - 2*/
}
li:last-child {
   background: red;
   height: 300px; 
   grid-column:2/4;
   grid-row:3/5;
}

li {
   border: 1px dotted red;
}

li:nth-child(2),
li:nth-child(3){
   grid-column:3/4;
   background: green;
}
li:nth-child(3) {
  grid-row:2;
}

li:nth-child(4),
li:nth-child(5) {
   grid-column:1/2;
   grid-row:3;
   background: green;
}

li:nth-child(5) {
   grid-row:4;
}

/*remove the grid and use block*/
@media (max-width:400px) {
 ul {
   display:block;
 }
 ul li:nth-child(n) {
   display:block;
   height:200px;
   margin:5px 0;
 }
}

<ul>
   <li><div></div></li>
   <li><div></div></li>
   <li><div></div></li>
   <li><div></div></li>
   <li><div></div></li>
   <li><div></div></li>
</ul>