我正在重构非响应代码,并尝试使用FlexBox将下面的代码显示为2×2网格.我尝试过使用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;
}
同样,我想要做的就是将这些图像置于响应的2×2方向.谢谢！
解决方法
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;
}
笔记：
>创建弹性容器时(通过将display：flex或display：inline-flex应用于元素),子元素将成为弹性项目. Flex子容器的后代超出子容器不会成为弹性项目,因此不接受flex属性.
在您的代码中,.gallery是flex容器.这意味着它的子项 – h2和ul – 是弹性项目.但是,ul的子项不是flex项,flex属性不适用.这就是为什么包含在li元素中的图像“充当块元素并且不会并排放置”.>要将flex属性应用于li元素,必须将其父元素设置为flex容器.通过添加display：flex到ul,li变为flex项. (注意,img元素仍然是内联元素,因为它们不是flex容器的子元素.)
