博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Flex实现九宫格
阅读量:7144 次
发布时间:2019-06-29

本文共 379 字,大约阅读时间需要 1 分钟。

写一个靠谱的flex布局

clipboard.png

   

关键点:利用了padding-top和flex-wrap:wrap,当设置background-color时,是包括盒子模型中的content和padding的,但是为什么不设置height呢?因为父元素没有高度,所以定义height:30%是没有用的,且若想每个block都为正方形,最好的方式就是设置padding-top/padding-bottom:a%,因为此时的百分比是父元素宽度的百分比,而width也为父元素宽度的百分比,所以block可以成为正方形。

转载地址:http://tpwgl.baihongyu.com/

你可能感兴趣的文章
中文特殊符号大全
查看>>
.NET Compact Framework下的Ping(ICMP)的开发
查看>>
arcgis for flex map遮罩
查看>>
设计模式之装饰模式篇(Decorator)
查看>>
为gif动画添加水印-有具体实现[2008-02-15日更新]
查看>>
hdu4288 Coder
查看>>
汽车常识全面介绍 - 悬挂系统
查看>>
ubuntu下mysql攻略
查看>>
餐饮云端
查看>>
Ajax , 好大一颗地雷啊
查看>>
黑客攻防实战入门(第三版)
查看>>
速度与激情
查看>>
DX9 HLSL Semantics
查看>>
HDU 4408 Minimum Spanning Tree(最小生成树计数)
查看>>
BZOJ 3142 数列(组合)
查看>>
csharp: word or excel Convert to PDF
查看>>
csharp: Export or Import excel using NPOI
查看>>
一起谈.NET技术,VS 2010 和 .NET 4.0 系列之《多显示器支持》篇
查看>>
“Linaro”将推动开源软件新一波开发潮
查看>>
VS201“.NET研究”0实践RUP4+1架构模型
查看>>