使用Flexbox的在UL作为一个2x2栅格

我重构非响应代码，我试图如使用Flexbox的一个2×2 网格以显示下面的代码来呈现4个图像。我曾尝试使用display: flex,flex-flow: row-wrap，但我的ul中的图像充当块元素，不会并排坐在一起。使用Flexbox的在UL作为一个2x2栅格

这里是原代码：

<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方向。谢谢！

来源

2016-02-14 femmebug

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

注：

当你创建一个Flex容器（通过将display: flex或display: inline-flex应用于元素），子元素变为弹性项目。儿童以外的柔性容器的后代不会变成柔性物品，因此不接受柔性属性。

在您的代码中，.gallery是flex容器。这意味着它的子女– h2和ul –是弹性项目。但是，ul的孩子不是弹性项目，而且弹性属性不适用。这就是为什么li元素“”中包含的图像“充当块元素并且不会并排坐在”。
要将柔性属性应用于li元素，必须将其父级制作为柔性容器。通过将display: flex添加到ul，li成为弹性项目。（注意，img元素仍然是内联元素，因为它们不是flex容器的子元素。）

来源

2016-02-14 05:38:34

谢谢！它完美的工作，并感谢你解释flex项目是如何工作的（并且不起作用！）@Michael – femmebug

@Michael_B当没有容器宽度时，究竟是什么定义它包装2x2？如果你想要3顶3底，你会怎么做？我很欣赏任何输入。 –

@SteveHartley flex-basis：calc（50％ - 20px）; - 改变你需要的东西的50％ – vals

使用Flexbox的在UL作为一个2x2栅格

回答

相关问题