155 lines
2.9 KiB
SCSS
155 lines
2.9 KiB
SCSS
// flex布局
|
|
|
|
@use 'mixins/function' as *;
|
|
@use 'mixins/mixins' as *;
|
|
|
|
[class*=#{bem('flex')}] {
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
@include b(flex) {
|
|
// 方向
|
|
@each $direction in (row, row-reverse, column, column-reverse) {
|
|
&-#{$direction} {
|
|
flex-direction: $direction;
|
|
}
|
|
}
|
|
// 换行
|
|
@each $wrap in (nowrap, wrap, wrap-reverse) {
|
|
&-#{$wrap} {
|
|
flex-wrap: $wrap;
|
|
}
|
|
}
|
|
// 空间分配
|
|
&-1 {
|
|
flex: 1 1 0%;
|
|
}
|
|
&-auto {
|
|
flex: 1 1 auto;
|
|
}
|
|
&-inital {
|
|
flex: 0 1 auto;
|
|
}
|
|
&-none {
|
|
flex: none;
|
|
}
|
|
// grow
|
|
&-grow {
|
|
flex-grow: 1;
|
|
&-0 {
|
|
flex-grow: 0;
|
|
}
|
|
}
|
|
// shrink
|
|
&-shrink {
|
|
flex-shrink: 1;
|
|
&-0 {
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
|
|
// 组合对其方式
|
|
@each $align in (start, end, center, baseline, stretch) {
|
|
@each $justitfy in (start, end, center, between, around) {
|
|
&-#{$align}-#{$justitfy} {
|
|
@if $align == 'start' {
|
|
align-items: flex-start;
|
|
} @else if $align == 'end' {
|
|
align-items: flex-end;
|
|
} @else {
|
|
align-items: $align;
|
|
}
|
|
@if $justitfy == 'between' {
|
|
justify-content: space-between;
|
|
} @else if $justitfy == 'around' {
|
|
justify-content: space-around;
|
|
} @else if $justitfy == 'start' {
|
|
justify-content: flex-start;
|
|
} @else if $justitfy == 'end' {
|
|
justify-content: flex-end;
|
|
} @else {
|
|
justify-content: $justitfy;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-center {
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
// justify-content
|
|
@each $item
|
|
in (
|
|
(start, flex-start),
|
|
(end, flex-end),
|
|
(center, center),
|
|
(between, space-between),
|
|
(around, space-around),
|
|
(evenly, space-evenly)
|
|
)
|
|
{
|
|
&.#{'justify-' + nth($item, 1)} {
|
|
justify-content: nth($item, 2);
|
|
}
|
|
}
|
|
|
|
// justify-item
|
|
@each $item
|
|
in ((start, start), (end, end), (center, center), (stretch, stretch))
|
|
{
|
|
&.#{'justify-item-' + nth($item, 1)} {
|
|
justify-items: nth($item, 2);
|
|
}
|
|
}
|
|
|
|
// justify-self
|
|
@each $item
|
|
in (
|
|
(auto, auto),
|
|
(start, start),
|
|
(end, end),
|
|
(center, center),
|
|
(stretch, stretch)
|
|
)
|
|
{
|
|
&.#{'justify-self-' + nth($item, 1)} {
|
|
justify-self: nth($item, 2);
|
|
}
|
|
}
|
|
|
|
// align content
|
|
@each $item
|
|
in (
|
|
(start, flex-start),
|
|
(end, flex-end),
|
|
(center, center),
|
|
(between, space-between),
|
|
(around, space-around),
|
|
(evenly, evenly)
|
|
)
|
|
{
|
|
&.#{'content-' + nth($item, 1)} {
|
|
align-content: nth($item, 2);
|
|
}
|
|
}
|
|
|
|
// align-items
|
|
@each $item
|
|
in (
|
|
(start, flex-start),
|
|
(end, flex-end),
|
|
(center, center),
|
|
(baseline, baseline),
|
|
(stretch, stretch)
|
|
)
|
|
{
|
|
&.#{'items-' + nth($item, 1)} {
|
|
align-items: nth($item, 2);
|
|
}
|
|
}
|
|
}
|