$directions: (
'center': center,
'end': flex-end,
'space-between': space-between,
'space-around': space-around,
'start': flex-start
);
.column {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
}
@each $direction, $flex-direction in $directions {
.column-#{$direction} {
@extend .column;
align-items: $flex-direction;
}
.row-#{$direction} {
@extend .row;
justify-content: $flex-direction;
}
}
@for $i from 1 through 3 {
.item-#{$i} {
flex: $i;
min-width: 0;
}
}
Base layout file for general app usage.
THIS IS STILL A WORK IN PROGRESS, ALL SUGGESTIONS ARE WELCOME :)
THIS IS STILL A WORK IN PROGRESS, ALL SUGGESTIONS ARE WELCOME :)
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.