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

概述我正在重构非响应代码,并尝试使用Flexbox将下面的代码显示为2×2网格.我尝试过使用display：flex,flex-flow：row-wrap,但是我的ul中的图像充当了块元素,不会并排放置. 这是原始代码： <div class="gallery"> <h2>Newest Products:</h2> <ul> <li><img sr 我正在重构非响应代码,并尝试使用FlexBox将下面的代码显示为2×2网格.我尝试过使用display：flex,flex-flow：row-wrap,但是我的ul中的图像充当了块元素,不会并排放置.

这是原始代码：

<div >        <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;}

DEMO

笔记：

>创建d性容器时(通过将display：flex或display：inline-flex应用于元素),子元素将成为d性项目. Flex子容器的后代超出子容器不会成为d性项目,因此不接受flex属性.

在您的代码中,.gallery是flex容器.这意味着它的子项 – h2和ul – 是d性项目.但是,ul的子项不是flex项,flex属性不适用.这就是为什么包含在li元素中的图像“充当块元素并且不会并排放置”.>要将flex属性应用于li元素,必须将其父元素设置为flex容器.通过添加display：flex到ul,li变为flex项. (注意,img元素仍然是内联元素,因为它们不是flex容器的子元素.)

总结

以上是内存溢出为你收集整理的html – 使用Flexbox将ul中的4个图像呈现为2×2网格全部内容，希望文章能够帮你解决html – 使用Flexbox将ul中的4个图像呈现为2×2网格所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。