使用 Flexbox 将 ul 中的 4 个图像呈现为 2x2 网格

Question

我正在重构非响应式代码，并尝试使用 Flexbox 将以下代码显示为 2x2 网格。我曾尝试使用display: flex、flex-flow: row-wrap，但我的ul 中的图像充当块元素，不会并排放置。

这里是原始代码：

<div class="gallery">
        <h2>Newest Products:</h2>
        <ul>
           <li><img src="http://placehold.it/360x240" alt="First gallery image" /></li>
           <li><img src="http://placehold.it/360x240" alt="Second gallery image" /></li>
           <li><img src="http://placehold.it/360x240" alt="Third gallery image" /></li>
           <li><img src="http://placehold.it/360x240" alt="Fourth gallery image" /></li>
        </ul>
     </div>

.gallery {
   clear: both;
}

.gallery ul {
   list-style: none;
   margin: 32px 0;
}

.gallery li {
   float: left;
   margin: 0 10px;
}

.gallery img {
   width: 280px;
   height: auto;
}

这个截图是我尝试使用这段代码时发生的：

.gallery {
clear: both;
display: flex;
flex-flow: row wrap;
}
.gallery ul {
   list-style: none;
   margin: 32px 0;
}
.gallery li {
margin: 0 10px;
flex-basis: 50%;
}
.gallery img {
width: 50%;
height: auto;
}

同样，我想要做的就是将这些图像以响应式 2x2 方向放置。谢谢！

Answer 1

HTML（无变化）

CSS

.gallery {}

.gallery ul {
    display: flex;
    flex-flow: row wrap;
    list-style: none;
    margin: 32px 0;
}

.gallery li {
    margin: 0 10px;
    flex-basis: calc(50% - 20px);  /* width minus margins */
}

.gallery img {
    width: 100%;                   /* occupy 100% width of li container */
    height: auto;
}

DEMO

注意事项：

• 当您创建弹性容器时（通过将display: flex 或display: inline-flex 应用于元素），子元素 成为弹性项目。 flex 容器超出子元素的后代不会成为 flex 项，因此不接受 flex 属性。

  在您的代码中，.gallery 是弹性容器。这意味着它的孩子——h2 和ul——是弹性项目。但是，ul 的子项不是弹性项目，弹性属性不适用。这就是为什么 li 元素中包含的图像“充当块元素，不会并排放置”。

• 要将弹性属性应用于li 元素，必须将它们的父元素设为弹性容器。通过将display: flex 添加到ul，li 成为弹性项目。 （注意，img 元素仍然是内联元素，因为它们不是 flex 容器的子元素。）