常见应用场景
现在的应用界面基本都是大同小异,宫格布局现在基本成了每个应用必然的存在。
带边框,常用在“功能导航“页面
无边框,常用在首页分类设计目标
在scss环境下,通过mixin实现n宫格,并且可以支持“有无边框”和“每个格是否正方形“:
<代码> @include网格(3,3,真实);//3 x 3,有边框,且每个格为正方形 @include网格(2、5、假,假);//2 x 5,无边框最终效果
“填充百分比“小技巧
先解释一个小技巧,如何实现正方形,保证看一遍就会,结论就是:
填充的值如果是百分比,那么他是<强>相对“父“元素宽度计算强的,也就是说如果“父“元素宽度是100 px,“子“元素设置padding-top: 100%,“子“元素的padding-top实际上等于100 px,这样就实现了一个正方形(100 x 100)。为了减少干扰,我们把“子“元素高度设置为0;
设计思路(无关你是scss还是少)
<李>为了方便内部元素水平/垂直居中,整体我们用flex布局。 <李>使用正方形占位,因为用了padding-top: 100%,所以我们就<强>需要再单独用一个div来装内容强,我给他起名“<强> item__content “。 <李>为了让<强>内容的容器div 强充满方块,我们给他设置样式:位置:绝对;:0;左:0;右:0;底:0;;李
因此我们的html是这样的:
<代码> & lt; !——一个网格是一个flex容器,方便他的内容做“水平/垂直居中”——比; & lt; div类="网格"比; & lt; !——a-grid__item用来占位实现正方形——比; & lt; div类=癮-grid__item”比; & lt; !——item__content才是真正装内容的容器——比; & lt; div类=癷tem__content”比; 内容... & lt;/div> & lt;/div> & lt;/div> 专门建立的学习Q-q-u-n⑦⑧④-⑦⑧③——零①②分享学习方法和需要注意的小细节,互相交流学习,不停更新最新的教程和学习技巧(从零基础开始到网络前端项目实战教程,学习工具,全栈开发学习路线以及规划)代码(scss)
这里做了3件事:
为了不冗余,我把公共的部分抽离的出来起名“<强> .a-grid “;
mixin支持4个参数,分别是美元;行(行数),美元;列(列数),美元;hasBorder(是否有边框),美元;isSquare(是否保证每个块是正方形)。
mixin内部通过计算并结合:nth-child实现“整体无外边框“的效果,<代码>。一个网格{ 显示:flex; flex-wrap:包装; 宽度:100%; .a-grid__item { text-align:中心; 位置:相对; 祝辞。item__content { 显示:flex flex-flow:列; 对齐项目:中心; justify-content:中心; } } } @mixin网格($行:3美元列:3美元hasBorder:假的,$ isSquare: true) { @extend .a-grid; .a-grid__item { flex-basis: 100%/美元列; @ if ($ isSquare) { padding-bottom: 100%/美元列; 高度:0; } 祝辞。item__content { @ if ($ isSquare) { 位置:绝对的; 上图:0;左:0;右:0;底:0; } } } @for指数从1美元(美元(美元行- 1)*列+ 1){ .a-grid__item: nth-child(#{美元指数}){ @ if ($ hasBorder) { 边界底部:1 px固体# eee; } } } {@for指数从1美元列 .a-grid__item: nth-child(#{$列}n + #{美元指数}){ @ if ($ hasBorder) { 边境:1 px固体# eee; } } } }使用
<代码>//生成一个3行3列,正方形格子的宫格 .a-grid-3-3 { @include网格(3,3,真实); }//生成一个2行5列,无边框宫格,每个格子由内容决定高度 .a-grid-2-5 { @include网格(2、5、假,假); } 专门建立的学习Q-q-u-n⑦⑧④-⑦⑧③——零①②分享学习方法和需要注意的小细节,互相交流学习,不停更新最新的教程和学习技巧(从零基础开始到网络前端项目实战教程,学习工具,全栈开发学习路线以及规划)网络前端入门到实战:css如何实现n宫格布局?
