Javascript CSS中的砖块布局

两天来，我一直在尝试创建一个砖块布局，就像CSS中的附加图像一样，但没有成功。请看附件中的图片

为了实现这种布局，我编写了一些代码。我尝试使用以下HTML复制第一行（带有单词“Let's”的行

<div class="photo-row first">
    <div class="first-item-1"></div>
    <div class="first-item-2"></div>
    <div class="first-item-3"></div>
    <div class="first-item-4"></div>
    <div class="first-item-5"></div>
</div>

其想法是给每个div一个固定的父div的百分比宽度，以便它们以砖格式对齐并响应。然后我会给每个孩子一张背景图片。我的布局可以工作，但在某些视口中它会中断，最后一个子div会移到第二行

我还制作了一个codepen演示来演示这一点：

.photo行{
宽度：100%；
高度：200px；
}
.照片行.第一分区{
显示：内联块；
身高：100%；
}
.第一项-1{
宽度：13.57%；
背景：红色；
}
.第一项-2{
宽度：19.21%；
背景：绿色；
}
.第一项-3{
宽度：31.21%；
背景：橙色；
}
.第一项-4{
宽度：15.14%；
背景：蓝色；
}
.第一项-5{
宽度：19.78%；
背景：黄色；
}

---

使用

display:flex

您可以更轻松地创建“砖”状墙，并且可以使用

flex grow

属性比使用百分比更轻松地控制容器宽度

为了好玩，这里有一个例子你可以玩。更改砖块类型的任何

n

上的

flex grow

值，也可以创建更随机的图案。它是完全灵活的

另外，使用Flex box，您可以使用“砖块”上的

align items

和

justify content

更轻松地控制文本对齐

在所提供的示例中，我们基本上将所有砖块设置为

flex-grow:2

。因此，在相同的情况下，它们都将伸缩到相同的大小，并在每行中占用相同的空间量。然后，我们可以使用伪选择器来查找偶数行以及偶数行中的第一块和最后一块砖块，并使

flex增长：1

（或两块的一半），以便在每一端制作半块砖块

.wall{
高度：自动；
}
.行{
显示器：flex；
边框顶部：2件纯白；
}
.街.砖{
柔性生长：2；
}
.row.brick:不是（：最后一个孩子）{
右边框：2倍纯白；
}
.世界其他地区：第n个孩子（偶数）>.布里克：第一个孩子，
.行：第n个孩子（偶数）>.砖：最后一个孩子{
柔性生长：1；
}
.砖{
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景色：红色；
高度：50px；
颜色：#fff；
字体系列：Helvetica，无衬线；
字体大小：12px；
}

让
制作
这个
世界
吮吸
较少的

我建议将flex box用于此类布局。我绝对同意flexbox可能是正确的方法，但您可能也想看看它是否适合您。flexbox很好，但并非所有浏览器都支持，CSS网格也支持flexbox。如果这是一个问题，您只需浮动元素以删除空白-

float:left我想说，在这一点上，FlexBox得到了相当广泛的支持（）。对我来说，解决浏览器中的已知问题（看看你，即…）通常比使用传统的显示方法、浮动和百分比来解决问题更容易。
.photo-row {
    width: 100%;
    height: 200px;
}
.photo-row.first div {
    display: inline-block;
    height: 100%;
}
.first-item-1 {
    width: 13.57%;
    background: red;
}
.first-item-2 {
    width: 19.21%;
    background: green;
}
.first-item-3 {
    width: 31.21%;
    background: orange;
}
.first-item-4 {
    width: 15.14%;
    background: blue;
}
.first-item-5 {
    width: 19.78%;
    background: yellow;
}