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

概述我们如何实现以下布局： 满足以下条件： >每行的切片高度应与行中的最高元素相等 >行中的最后一个tile应与父容器齐平(无间隙) >瓷砖可以是不同的宽度比(3倍三分之一或三分之三三分之二等) >瓷砖的排序未知 >没有网格框架 >仅限现代浏览器 以下标记： <div class="tile-wrapper"> <div class="tile-container"> <div class 我们如何实现以下布局：

满足以下条件：

>每行的切片高度应与行中的最高元素相等
>行中的最后一个tile应与父容器齐平(无间隙)
>瓷砖可以是不同的宽度比(3倍三分之一或三分之三三分之二等)
>瓷砖的排序未知
>没有网格框架
>仅限现代浏览器

以下标记：

<div >  <div >    <div >1/3</div>    <div >1/3</div>    <div >1/3</div>    <div >2/3</div>    <div >1/3</div>    <div >1/6</div>    <div >1/6</div>    <div >1/3</div>    <div >1/6</div>    <div >1/6</div>  </div></div>

解决方法 这是一种越来越常见的布局,使用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);}

Here’s a Fiddle

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

总结

以上是内存溢出为你收集整理的html – 具有一致边距和对齐的Flexbox平铺布局全部内容，希望文章能够帮你解决html – 具有一致边距和对齐的Flexbox平铺布局所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。