You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
1.4 KiB
58 lines
1.4 KiB
@if $enable-flex {
|
|
@each $breakpoint in map-keys($grid-breakpoints) {
|
|
// Flex column reordering
|
|
@include media-breakpoint-up($breakpoint) {
|
|
.flex-#{$breakpoint}-first {
|
|
order: -1;
|
|
}
|
|
.flex-#{$breakpoint}-last {
|
|
order: 1;
|
|
}
|
|
}
|
|
|
|
// Alignment for every item
|
|
@include media-breakpoint-up($breakpoint) {
|
|
.flex-items-#{$breakpoint}-top {
|
|
align-items: flex-start;
|
|
}
|
|
.flex-items-#{$breakpoint}-middle {
|
|
align-items: center;
|
|
}
|
|
.flex-items-#{$breakpoint}-bottom {
|
|
align-items: flex-end;
|
|
}
|
|
}
|
|
|
|
// Alignment per item
|
|
@include media-breakpoint-up($breakpoint) {
|
|
.flex-#{$breakpoint}-top {
|
|
align-self: flex-start;
|
|
}
|
|
.flex-#{$breakpoint}-middle {
|
|
align-self: center;
|
|
}
|
|
.flex-#{$breakpoint}-bottom {
|
|
align-self: flex-end;
|
|
}
|
|
}
|
|
|
|
// Horizontal alignment of item
|
|
@include media-breakpoint-up($breakpoint) {
|
|
.flex-items-#{$breakpoint}-left {
|
|
justify-content: flex-start;
|
|
}
|
|
.flex-items-#{$breakpoint}-center {
|
|
justify-content: center;
|
|
}
|
|
.flex-items-#{$breakpoint}-right {
|
|
justify-content: flex-end;
|
|
}
|
|
.flex-items-#{$breakpoint}-around {
|
|
justify-content: space-around;
|
|
}
|
|
.flex-items-#{$breakpoint}-between {
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|