使用Flexbox以ul形式显示4个图像为2x2网格 [英] Using Flexbox to present 4 images in a ul as a 2x2 grid

问题描述

我重构了无响应代码，并尝试使用 Flexbox 将以下代码显示为 2x2网格。我已经尝试使用 display：flex ， flex-flow：row-wrap $ c> ul 作为块元素，不会并排。

以下是原始代码：

 < div class = gallery> 
< h2>最新产品：< / h2> 
< ul> 
< li>< img src =http://placehold.it/360x240alt =第一张图片库图片/>< / li& 
< li>< img src =http://placehold.it/360x240alt =第二个图库图片/>< / li> 
< li>< img src =http://placehold.it/360x240alt =第三个图库图片/>< / li> 
< li>< img src =http://placehold.it/360x240alt =第四画廊图片/>< / 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; 
} 
  

此屏幕截图是我尝试使用此代码时发生的情况：

 。画廊{
 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方向。非感谢！

解决方案

HTML （无更改）

CSS

  .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减去边距* / 
} 
 
 .gallery img {
 width：100％; / *占据li容器的100％宽度* / 
 height：auto; 
} 
  

DEMO

注意：

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

  
  
  

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




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

I am refactoring non-responsive code and am trying to display the below code as a 2x2 grid using Flexbox. I have tried using display: flex, flex-flow: row-wrap, but the images in my ul are acting as block elements and won't sit side by side.

Here is the original code:

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

This screenshot is what happened when I tried using this code:

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

Again, all I want to do is place these images in a responsive 2x2 orientation. Thanks!

解决方案

HTML (no changes)

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

NOTES:

• When you create a flex container (by applying display: flex or display: inline-flex to an element), the child elements become flex items. The descendants of the flex container beyond the children do not become flex items and, therefore, do not accept flex properties.

  In your code, .gallery is the flex container. This means that its children – h2 and ul – are flex items. However, the children of the ul are not flex items and flex properties don't apply. That's why the images, contained in the li elements, "are acting as block elements and won't sit side by side".

• To apply flex properties to the li elements, their parent must be made a flex container. By adding display: flex to the ul, the li's become flex items. (Note, the img elements remain inline elements because they are not children of the flex container.)

这篇关于使用Flexbox以ul形式显示4个图像为2x2网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！