57 lines
1.2 KiB
SCSS
57 lines
1.2 KiB
SCSS
@mixin flexGapRow($size) {
|
|
gap: $size;
|
|
& > * {
|
|
margin-right: $size;
|
|
}
|
|
& > *:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
@mixin flexGapColumn($size) {
|
|
gap: $size;
|
|
& > * {
|
|
margin-bottom: $size;
|
|
}
|
|
& > *:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 兼容低版本浏览器的 Flex Wrap 布局 Mixin
|
|
* 支持浏览器：自动检测 gap 支持，不支持时回退到负边距方案
|
|
* @param {number} $row-gap - 行间距
|
|
* @param {number} $column-gap - 列间距
|
|
* @param {string} $direction: row - 布局方向 (row|column)
|
|
*/
|
|
@mixin flexGapWrap($row-gap, $column-gap, $direction: row) {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: $direction;
|
|
|
|
// 现代浏览器：直接使用 gap
|
|
@supports (gap: 1px) {
|
|
gap: $row-gap $column-gap;
|
|
}
|
|
|
|
// 低版本浏览器回退方案
|
|
@supports not (gap: 1px) {
|
|
@if $direction == row {
|
|
// 横向布局：用负边距补偿
|
|
margin: -$row-gap / 2 (-$column-gap / 2);
|
|
|
|
& > * {
|
|
margin: $row-gap / 2 $column-gap / 2;
|
|
}
|
|
} @else {
|
|
// 纵向布局
|
|
margin: (-$row-gap / 2) (-$column-gap / 2);
|
|
|
|
& > * {
|
|
margin: $row-gap / 2 $column-gap / 2;
|
|
}
|
|
}
|
|
}
|
|
}
|