使用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应用于元素），子元素将成为弹性项目。灵活容器的后代超出子项不会成为弹性项目，因此不接受弹性属性。

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

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