flex 弹性盒子布局多行,最后一行不占满的技巧
在不清楚盒子宽度和盒子内容的宽度的时候,可以采用以下技巧实现每行多个盒子的布局。
·
在不清楚盒子宽度和盒子内容的宽度的时候,可以采用以下技巧进行布局。
适用情景:
该情景也就是如下描述:
- 每行1个以上的盒子
- 最后一行不占满盒子
- 盒子和外层容器的宽度都为百分比或者不确定,只是确定每行摆放多少个盒子。
解决代码思路:
- 外层容器给弹性盒子布局, 且给外层盒子一个after伪类元素。
.container {
display: flex;
justify-content: space-between; //两边布局
flex-wrap: wrap; //换行
}
// 可以理解为占位
.container::after {
content: '';
width: 30%;
height: 0;
visibility: hidden;
}
- 给容器内的盒子宽度按照100%等分,比如每行三个盒子就可以给30%,四个盒子就可以给25%, 高度可以由固定内容撑开最好,也可以自己给固定高度。
.item {
width: 30%;
}
这样就可以完成上面要求的布局了。
注意:
- 容器内的盒子不要单独封装成组件,否则设置宽度百分比不生效。
- 如果每行是偶素个盒子,需要实现盒子间的间距可以先占满之后使用padding填充即可,不过要求盒子背景和容器背景色一致。
- 如果不给上面占位,又使用justify-content: flex-start; 去布局,在用padding-left调整位置,在多端设备中会是很糟糕的体验。
- 上面占位的伪类如果不给,就会是下面的结果。
更多推荐
已为社区贡献2条内容
所有评论(0)