我正在使用Drupal FortyTwo theme.在FortyTwo基础主题中有一个flexbox mixin
提供如下:
@mixin flex-order($number) {
order: #{$number};
}
@mixin flex-align($align) {
@if $align == 'start' or $align == 'end' {
align-items: flex-#{$align};
} @else {
align-items: #{$align};
}
}
@mixin flex-flow($direction: none, $wrap: none) {
@if $wrap != none {
flex-wrap: #{$wrap};
}
@if $direction != none {
flex-direction: #{$direction};
}
}
@mixin flex-grow($value) {
flex-grow: #{$value};
}
@mixin flex-shrink($value) {
flex-shrink: #{$value};
}
@mixin flex-child($value) {
flex: #{$value};
}
@mixin flex($wrap: none, $justify: none, $align: none, $flow: none, $direction: none, $inline: none) {
@if $inline != none {
display: inline-flex;
} @else {
display: flex;
}
@if $direction != none {
flex-direction: #{$direction};
}
@if $wrap != none {
flex-wrap: #{$wrap};
}
@if $align != none {
align-items: #{$align};
}
@if $justify != none {
justify-content: #{$justify};
}
}
我正在更新主题。我无法弄清楚如何使用这个mixin?在旧主题中,例如这部分:
#my-block {
html.flexbox & {
@include flex;
@include bvp(flex-direction, column);
}
div.content {
html.flexbox & {
@include bvp(flex, 1);
}
position: relative;
}
}
另外,我必须摆脱bvp mixin
。如何使用上面的flexbox
mixins以正确的方式添加flexbox
?
如你所见,我们有一系列mixins。
最后一个应该是最有帮助的,但是在Code Pen中使用它,我不相信它实际上是正常的。其他一些人并不是特别有帮助。
例如,我们可以看到@mixin flex-order
只是用我们传递给它的任何数字吐出order
flexbox属性。
所以这:
#my-box {
@include flex-order(2);
}
输出:
#my-box {
order: 2;
}
好吧,除非你只是想要一个视觉提示,order
只涉及弹性项目,这并不能完全帮助你,因为你可以在SCSS中轻松完成order: 2
。
同样适用于mixins flex-align
,flex-grow
,flex-shrink
和flex-child
。
因此,单一属性mixins并不是非常有用,而且最后的mixin似乎已经破坏了,我建议您只需在SCSS中根据需要指定flex属性,如果需要,可以使用flex-flow
mixin。
flex-flow
flexbox属性需要两个值:一个用于flex包装,另一个用于flex方向。在mixin中,它将该速记属性输出为两个单独的属性,或者如果您只传递一个属性,则仅输出传递给它的属性,这样您就不会得到无效的CSS规则。
所以这:
#my-box {
@include flex-flow(wrap, column);
}
#my-other-box {
@include flex-flow(wrap);
}
输出:
#my-box {
flex-wrap: wrap;
flex-direction: column;
}
#my-other-box {
flex-wrap: wrap;
}
这样你有两个可接受的CSS规则。否则,如果你真的使用了flex-flow
属性,你会得到:
#my-box {
flex-flow: wrap column; /* invalid; flex-direction must come first */
}
#my-other-box {
flex-flow: wrap; /* invalid; missing flex-direction */
}
在我删除bvp
mixin并指定没有mixins的各个flex属性之后,你的最终SCSS可能看起来像这样,正如我最初建议的那样。
#my-block {
html.flexbox & {
@include flex-flow(row, wrap);
align-items: center;
justify-content: center;
}
div.content {
html.flexbox & {
flex: 1 0 auto;
}
position: relative;
}
}