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>

高度可变的CSS Flex网格

1 个答案: