使用 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，但我的 ul 中的图像充当块元素并获胜不要并排坐着.

这是原始代码:

<h2>最新产品:</h2><ul><li><img src="http://placehold.it/360x240" alt="第一张画廊图片"/></li><li><img src="http://placehold.it/360x240" alt="第二个画廊图片"/></li><li><img src="http://placehold.it/360x240" alt="第三个画廊图片"/></li><li><img src="http://placehold.it/360x240" alt="第四个画廊图片"/></li>
.画廊{清楚:两者；}.gallery ul {列表样式:无；边距:32px 0;}.画廊李{向左飘浮;边距:0 10px；}.gallery img {宽度:280px；高度:自动；}

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

.gallery {清楚:两者；显示:弹性；flex-flow:行包装；}.gallery ul {列表样式:无；边距:32px 0;}.画廊李{边距:0 10px；弹性基础:50%；}.gallery img {宽度:50%；高度:自动；}

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

解决方案

HTML(无变化)

CSS

.gallery {}.gallery ul {显示:弹性；flex-flow:行包装；列表样式:无；边距:32px 0;}.画廊李{边距:0 10px；flex-basis: calc(50% - 20px);/* 宽度减去边距 */}.gallery img {宽度:100%；/* 占据 li 容器的 100% 宽度 */高度:自动；}

演示

注意:

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

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

• 要将 flex 属性应用到 li 元素，它们的父元素必须是一个 flex 容器.通过将 display: flex 添加到 ul 中，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屋！