一款包罗万象的 mixin——基于 flexbox 的布局 mixin
AWS 安全直播！
有时使用flexbox 布局会生成大量的 css 属性，而最终结果可能会因为生成的属性过多而变得难以阅读。
我创建了一个简单的scss mixin来处理通用的 flexbox 布局，因为我从事复杂的 Web 应用程序开发，需要创建很多不同的布局。
这个 mixin 处理一些（并非全部）flexbox 属性，并涵盖了 flexbox 布局的主要情况：
/**
* FLEXBOX
* A mixin to rule complex flexbox layout
* @author nicolacastellanidev@gmail.com
*/
@mixin flexbox(
$display: flex,
$direction: row,
$placeContent: null,
$placeItems: null,
$wrap: nowrap,
$shrink: 0,
$grow: 0,
$alignContent: null,
$justifyContent: null,
$alignItems: null,
$justifyItems: null) {
display: $display;
flex-direction: $direction;
@if $placeContent == null {
@if $alignContent { align-content: $alignContent; }
@if $justifyContent { justify-content: $justifyContent; }
} @else {
place-content: $placeContent;
}
@if $placeItems == null {
@if $alignItems { align-items: $alignItems; }
@if $justifyItems { justify-items: $justifyItems; }
} @else {
place-items: $placeItems;
}
flex-wrap: $wrap;
flex-shrink: $shrink;
flex-grow: $grow;
}
这个 mixin 可以帮助你定义一个基于 flexbox 的元素，例如：
/* now we can add flexbox layout with a single line of code */
.anchor-top {
@include flexbox($placeItems: flex-start);
}
.anchor-bottom {
@include flexbox($placeItems: flex-end);
}
.anchor-center {
@include flexbox($placeItems: center);
}
.anchor-left {
@include flexbox($placeContent: flex-start);
}
.anchor-right {
@include flexbox($placeContent: flex-end);
}
.anchor-center-hor {
@include flexbox($placeContent: center);
}
这些类可以用来处理 HTML 布局，例如：
<div class="container">
<div class="box anchor-top anchor-left">
TOP LEFT
</div>
<div class="box anchor-top anchor-center-hor">
TOP CENTER
</div>
<div class="box anchor-top anchor-right">
TOP RIGHT
</div>
<div class="box anchor-center anchor-left">
CENTER LEFT
</div>
<div class="box anchor-center anchor-center-hor">
CENTER CENTER
</div>
<div class="box anchor-center anchor-right">
CENTER RIGHT
</div>
<div class="box anchor-bottom anchor-left">
BOTTOM LEFT
</div>
<div class="box anchor-bottom anchor-center-hor">
BOTTOM CENTER
</div>
<div class="box anchor-bottom anchor-right">
BOTTOM RIGHT
</div>
</div>
最终结果将是：
请查看此笔以获取实时示例：
希望这篇文章对你们有帮助 <3 爱你们所有人
文章来源：https://dev.to/nicolalc/a-mixin-to-rule-them-all-flexbox-driven-layout-mixin-1h43