本文共 2478 字,大约阅读时间需要 8 分钟。
@include grid(3, 3, true); // 3 x 3, 有边框, 且每个格为正方形 @include grid(2, 5, false, false); // 2 x 5, 无边框
web前端开发学习Q-q-u-n:731771211,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)内容...
.a-grid { display: flex; flex-wrap: wrap; width: 100%; .a-grid__item { text-align:center; position:relative; >.item__content { display:flex flex-flow: column; align-items: center; justify-content: center; } } } @mixin grid($row:3, $column:3, $hasBorder:false, $isSquare:true) { @extend .a-grid; .a-grid__item { flex-basis: 100%/$column; @if($isSquare) { padding-bottom: 100%/$column; height: 0; } >.item__content { @if($isSquare) { position:absolute; top:0;left:0;right:0;bottom:0; } } } @for $index from 1 to (($row - 1) * $column + 1) { .a-grid__item:nth-child(#{$index}) { @if($hasBorder) { border-bottom: 1px solid #eee; } } } @for $index from 1 to $column { .a-grid__item:nth-child(#{$column}n + #{$index}) { @if($hasBorder) { border-right: 1px solid #eee; } } } }
// 生成一个 3行3列, 正方形格子的宫格 .a-grid-3-3 { @include grid(3, 3, true); } // 生成一个 2行5列, 无边框宫格, 每个格子由内容决定高度 .a-grid-2-5 { @include grid(2, 5, false, false); }
转载地址:http://wyfpi.baihongyu.com/