html 平铺 布局,html – 具有一致边距和对齐的Flexbox平铺布局

这是一种越来越常见的布局,使用flexbox和一些聪明的容器标记可以相对容易地实现.

平铺布局的常见问题是在多行的不同尺寸的贴片之间保持一致的间距和对齐.假设我们希望将所有切片分开30px的边距,我们可以简单地在所有切片上设置margin-right：30px,然后使用nth-of-type选择器移除行中最后一个切片的边距.

但是,当瓷砖的相对尺寸和顺序未知时,这是不可能的.例如,三分之一区块旁边的三分之二区块将不符合将最后一个区块的边距移除为由三个三分之一区块组成的行所需的相同的第n类型选择器规则.

巧妙的解决方法是将最右边的tile的边距压缩到父容器的宽度.我们可以通过将最外面的div的宽度设置为所需的宽度(在这种情况下为90％)并使用overflow：hidden,然后将内部容器的宽度设置为100％加上tile边距的宽度;宽度：计算(100％30px).这样,无论哪个瓷砖位于该行的最右侧位置,瓷砖将与其容器的边缘齐平.

为了确保瓷砖始终符合要求,我们将其柔性基准设置为我们希望它们占据的行宽减去瓷砖边距的比例; .third {flex：0 0 calc(33.33％ – 30px); / *为1/3平铺* /}

像这样：

* {

box-sizing: border-box;

}

.tile-wrapper {

display: block;

position: relative;

width: 90%;

margin: 0 auto;

overflow: hidden;

}

.tile-container {

display: flex;

position: relative;

width: calc(100% + 30px);

flex-wrap: wrap;

}

.tile {

display: inline-block;

margin-right: 30px;

margin-bottom: 30px;

min-height: 200px;

line-height: 199px;

text-align: center;

border: 1px solid black;

}

.two-thirds {

flex: 0 0 calc(66.66% - 30px);

}

.third {

flex: 0 0 calc(33.33% - 30px);

}

.sixth {

flex: 0 0 calc(16.66% - 30px);

}

注意：这仅适用于现代浏览器(Chrome,Safari,FF,IE11). IE11中还存在一个已知的错误,它要求您使用long-hand flex-basis样式属性以将其设置为calc()值.