mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-24 22:16:38 +02:00
Flexbox all the time (Drop IE9 support and remove $enable-flex option) (#21389)
* remove the $enable-flex variable option * remove bootstrap-flex.css dist file and it's grunt task * remove the separate flex css file for docs; it's all the same now * remove flexbox docs (porting some to the main grid docs in next commit) * clean up few grid docs bits to simplify copy, start to mention flexbox * port relevant flexbox-grid.md content to grid.md - clean up mixins - update how it works section - bring over sizing and alignment sections * remove the $enable-flex from the options.md page * update lead paragraph to mention flexbox * update migration to mention loss of ie9 support * remove mention of flexbox dist file * clarify IE support * making a note * remove flexbox variant mentions from component docs - updates docs for media object, navs, list group, and cards to consolidate docs - no more need to callout flexbox variants since it's now the default * remove $enable-flex if/else from sass files * remove flex dist files * update scss lint property order to account for flex properties * linting * change to numberless classes for autosizing, wrap in highlighting div * bump gruntfile and postcss to ie10 * redo intro sections * rearrange * phew, redo hella grid docs - rearrange all the things - consolidate some bits * remove reference to flexbox mode * more border action for demo * Make some changes to the .card's in .card-deck's to ensure footers align to the bottom
This commit is contained in:
Mark Otto
GitHub
@@ -160,6 +160,8 @@ linters:
|
||||
- flex-grow
|
||||
- flex-order
|
||||
- flex-pack
|
||||
- align-items
|
||||
- justify-content
|
||||
- float
|
||||
- width
|
||||
- min-width
|
||||
|
||||
@@ -12,9 +12,6 @@
|
||||
}
|
||||
|
||||
.card-block {
|
||||
@if (not $enable-flex) {
|
||||
@include clearfix;
|
||||
}
|
||||
padding: $card-spacer-x;
|
||||
}
|
||||
|
||||
@@ -69,9 +66,6 @@
|
||||
//
|
||||
|
||||
.card-header {
|
||||
@if (not $enable-flex) {
|
||||
@include clearfix;
|
||||
}
|
||||
padding: $card-spacer-y $card-spacer-x;
|
||||
margin-bottom: 0; // Removes the default margin-bottom of <hN>
|
||||
background-color: $card-cap-bg;
|
||||
@@ -83,9 +77,6 @@
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
@if (not $enable-flex) {
|
||||
@include clearfix;
|
||||
}
|
||||
padding: $card-spacer-y $card-spacer-x;
|
||||
background-color: $card-cap-bg;
|
||||
border-top: $card-border-width solid $card-border-color;
|
||||
@@ -205,68 +196,41 @@
|
||||
//
|
||||
// Those changes are noted by `// Margin balancing`.
|
||||
|
||||
@if $enable-flex {
|
||||
@include media-breakpoint-up(sm) {
|
||||
.card-deck {
|
||||
@include media-breakpoint-up(sm) {
|
||||
.card-deck {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
margin-right: -$card-deck-margin;
|
||||
margin-bottom: $card-spacer-y; // Margin balancing
|
||||
margin-left: -$card-deck-margin;
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
margin-right: -$card-deck-margin;
|
||||
margin-bottom: $card-spacer-y; // Margin balancing
|
||||
margin-left: -$card-deck-margin;
|
||||
|
||||
.card {
|
||||
flex: 1 0 0;
|
||||
margin-right: $card-deck-margin;
|
||||
margin-bottom: 0; // Margin balancing
|
||||
margin-left: $card-deck-margin;
|
||||
}
|
||||
flex: 1 0 0;
|
||||
flex-direction: column;
|
||||
margin-right: $card-deck-margin;
|
||||
margin-bottom: 0; // Margin balancing
|
||||
margin-left: $card-deck-margin;
|
||||
}
|
||||
}
|
||||
} @else {
|
||||
@include media-breakpoint-up(sm) {
|
||||
$space-between-cards: (2 * $card-deck-margin);
|
||||
.card-deck {
|
||||
display: table;
|
||||
width: 100%;
|
||||
margin-bottom: $card-spacer-y; // Margin balancing
|
||||
table-layout: fixed;
|
||||
border-spacing: $space-between-cards 0;
|
||||
|
||||
.card {
|
||||
display: table-cell;
|
||||
margin-bottom: 0; // Margin balancing
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
.card-deck-wrapper {
|
||||
margin-right: (-$space-between-cards);
|
||||
margin-left: (-$space-between-cards);
|
||||
.card-block {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Card groups
|
||||
//
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.card-group {
|
||||
@if $enable-flex {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
} @else {
|
||||
display: table;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
}
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
||||
.card {
|
||||
@if $enable-flex {
|
||||
flex: 1 0 0;
|
||||
} @else {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
}
|
||||
flex: 1 0 0;
|
||||
|
||||
+ .card {
|
||||
margin-left: 0;
|
||||
|
||||
@@ -300,39 +300,30 @@ select.form-control-lg {
|
||||
// default HTML form controls and our custom form controls (e.g., input groups).
|
||||
|
||||
.form-inline {
|
||||
@if $enable-flex {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
||||
// Because we use flex, the initial sizing of checkboxes is collapsed and
|
||||
// doesn't occupy the full-width (which is what we want for xs grid tier),
|
||||
// so we force that here.
|
||||
.form-check {
|
||||
width: 100%;
|
||||
}
|
||||
// Because we use flex, the initial sizing of checkboxes is collapsed and
|
||||
// doesn't occupy the full-width (which is what we want for xs grid tier),
|
||||
// so we force that here.
|
||||
.form-check {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Kick in the inline
|
||||
@include media-breakpoint-up(sm) {
|
||||
label {
|
||||
@if $enable-flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Inline-block all the things for "inline"
|
||||
.form-group {
|
||||
@if $enable-flex {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
flex-flow: row wrap;
|
||||
} @else {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
flex-flow: row wrap;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@@ -351,24 +342,6 @@ select.form-control-lg {
|
||||
|
||||
.input-group {
|
||||
width: auto;
|
||||
|
||||
@if not $enable-flex {
|
||||
display: inline-table;
|
||||
vertical-align: middle;
|
||||
|
||||
.input-group-addon,
|
||||
.input-group-btn,
|
||||
.form-control {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Input groups need that 100% width though
|
||||
.input-group > .form-control {
|
||||
@if not $enable-flex {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control-label {
|
||||
@@ -379,14 +352,9 @@ select.form-control-lg {
|
||||
// Remove default margin on radios/checkboxes that were used for stacking, and
|
||||
// then undo the floating of radios and checkboxes to match.
|
||||
.form-check {
|
||||
@if $enable-flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
} @else {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: auto;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
@@ -401,22 +369,15 @@ select.form-control-lg {
|
||||
|
||||
// Custom form controls
|
||||
.custom-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: 0;
|
||||
|
||||
@if $enable-flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
} @else {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.custom-control-indicator {
|
||||
position: static;
|
||||
display: inline-block;
|
||||
@if $enable-flex {
|
||||
margin-right: .25rem; // Flexbox alignment means we lose our HTML space here, so we compensate.
|
||||
}
|
||||
margin-right: .25rem; // Flexbox alignment means we lose our HTML space here, so we compensate.
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
|
||||
@@ -4,54 +4,34 @@
|
||||
|
||||
.input-group {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
@if $enable-flex {
|
||||
display: flex;
|
||||
} @else {
|
||||
display: table;
|
||||
// Prevent input groups from inheriting border styles from table cells when
|
||||
// placed within a table.
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
// Ensure that the input is always above the *appended* addon button for
|
||||
// proper border colors.
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex: 1 1 auto;
|
||||
// Add width 1% and flex-basis auto to ensure that button will not wrap out
|
||||
// the column. Applies to IE Edge+ and Firefox. Chrome do not require this.
|
||||
width: 1%;
|
||||
margin-bottom: 0;
|
||||
|
||||
// Bring the "active" form control to the front
|
||||
@include hover-focus-active {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
@if $enable-flex {
|
||||
flex: 1 1 auto;
|
||||
// Add width 1% and flex-basis auto to ensure that button will not wrap out
|
||||
// the column. Applies to IE Edge+ and Firefox. Chrome do not require this.
|
||||
width: 1%;
|
||||
} @else {
|
||||
// IE9 fubars the placeholder attribute in text inputs and the arrows on
|
||||
// select elements in input groups. To fix it, we float the input. Details:
|
||||
// https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-addon,
|
||||
.input-group-btn,
|
||||
.input-group .form-control {
|
||||
@if $enable-flex {
|
||||
// Vertically centers the content of the addons within the input group
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
} @else {
|
||||
display: table-cell;
|
||||
}
|
||||
// Vertically centers the content of the addons within the input group
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
&:not(:first-child):not(:last-child) {
|
||||
@include border-radius(0);
|
||||
@@ -60,9 +40,6 @@
|
||||
|
||||
.input-group-addon,
|
||||
.input-group-btn {
|
||||
@if not $enable-flex {
|
||||
width: 1%;
|
||||
}
|
||||
white-space: nowrap;
|
||||
vertical-align: middle; // Match the inputs
|
||||
}
|
||||
@@ -167,11 +144,8 @@
|
||||
// element above the siblings.
|
||||
> .btn {
|
||||
position: relative;
|
||||
|
||||
@if $enable-flex {
|
||||
// Vertically stretch the button and center its content
|
||||
flex: 1;
|
||||
}
|
||||
// Vertically stretch the button and center its content
|
||||
flex: 1;
|
||||
|
||||
+ .btn {
|
||||
margin-left: (-$input-btn-border-width);
|
||||
|
||||
@@ -3,10 +3,8 @@
|
||||
// Easily usable on <ul>, <ol>, or <div>.
|
||||
|
||||
.list-group {
|
||||
@if $enable-flex {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// No need to set list-style: none; since .list-group-item is block level
|
||||
padding-left: 0; // reset padding because ul and ol
|
||||
@@ -19,15 +17,10 @@
|
||||
// Use on `li`s or `div`s within the `.list-group` parent.
|
||||
|
||||
.list-group-item {
|
||||
@if $enable-flex {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
} @else {
|
||||
display: block;
|
||||
}
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
padding: $list-group-item-padding-y $list-group-item-padding-x;
|
||||
// Place the border on the list items and negative margin up for better styling
|
||||
margin-bottom: -$list-group-border-width;
|
||||
|
||||
@@ -1,36 +1,14 @@
|
||||
@if $enable-flex {
|
||||
.media {
|
||||
display: flex;
|
||||
}
|
||||
.media-body {
|
||||
flex: 1;
|
||||
}
|
||||
.media-middle {
|
||||
align-self: center;
|
||||
}
|
||||
.media-bottom {
|
||||
align-self: flex-end;
|
||||
}
|
||||
} @else {
|
||||
.media,
|
||||
.media-body {
|
||||
overflow: hidden;
|
||||
}
|
||||
.media-body {
|
||||
width: 10000px;
|
||||
}
|
||||
.media-left,
|
||||
.media-right,
|
||||
.media-body {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
}
|
||||
.media-middle {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.media-bottom {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.media {
|
||||
display: flex;
|
||||
}
|
||||
.media-body {
|
||||
flex: 1;
|
||||
}
|
||||
.media-middle {
|
||||
align-self: center;
|
||||
}
|
||||
.media-bottom {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -157,7 +157,7 @@
|
||||
}
|
||||
|
||||
|
||||
// Justified navigation (flexbox only)
|
||||
// Justified navigation
|
||||
//
|
||||
// Justified nav components are only built for flexbox mode in Bootstrap 4. In
|
||||
// previous versions, this component variation was limited to anchor-based nav
|
||||
@@ -167,13 +167,11 @@
|
||||
// Using flexbox, we avoid that problem altogether at the cost of no default
|
||||
// justified navigation for default Bootstrap. Sorry, y'all <3.
|
||||
|
||||
@if $enable-flex {
|
||||
.nav-justified {
|
||||
display: flex;
|
||||
.nav-justified {
|
||||
display: flex;
|
||||
|
||||
.nav-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.nav-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -137,14 +137,3 @@ mark,
|
||||
content: "\00A0 \2014"; // nbsp, em dash
|
||||
}
|
||||
}
|
||||
|
||||
@if not $enable-flex {
|
||||
// Clean up some horizontal `<dl>`s built with grids
|
||||
// scss-lint:disable QualifyingElement
|
||||
dl.row {
|
||||
> dd + dt {
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
// scss-lint:enable QualifyingElement
|
||||
}
|
||||
|
||||
@@ -122,7 +122,6 @@ $brand-inverse: $gray-dark !default;
|
||||
//
|
||||
// Quickly modify global styling by enabling or disabling optional features.
|
||||
|
||||
$enable-flex: false !default;
|
||||
$enable-rounded: true !default;
|
||||
$enable-shadows: false !default;
|
||||
$enable-gradients: false !default;
|
||||
|
||||
8
scss/bootstrap-flex.scss
vendored
8
scss/bootstrap-flex.scss
vendored
@@ -1,8 +0,0 @@
|
||||
// Bootstrap with Flexbox enabled
|
||||
//
|
||||
// Includes all the imports from the standard Bootstrap project, but enables
|
||||
// the flexbox variable.
|
||||
|
||||
$enable-flex: true;
|
||||
|
||||
@import "bootstrap";
|
||||
@@ -7,12 +7,8 @@
|
||||
// Common properties for all breakpoints
|
||||
%grid-column {
|
||||
position: relative;
|
||||
// Prevent columns from collapsing when empty
|
||||
min-height: 1px;
|
||||
|
||||
@if $enable-flex {
|
||||
width: 100%;
|
||||
}
|
||||
width: 100%;
|
||||
min-height: 1px; // Prevent columns from collapsing when empty
|
||||
|
||||
@include make-gutters($gutters);
|
||||
}
|
||||
@@ -26,24 +22,20 @@
|
||||
@extend %grid-column;
|
||||
}
|
||||
}
|
||||
@if $enable-flex {
|
||||
.col#{$infix} {
|
||||
@extend %grid-column;
|
||||
}
|
||||
.col#{$infix} {
|
||||
@extend %grid-column;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
||||
// Provide basic `.col-{bp}` classes for equal-width flexbox columns
|
||||
@if $enable-flex {
|
||||
.col#{$infix} {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
max-width: 100%;
|
||||
}
|
||||
.col#{$infix}-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
.col#{$infix} {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
max-width: 100%;
|
||||
}
|
||||
.col#{$infix}-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
@for $i from 1 through $columns {
|
||||
|
||||
@@ -5,9 +5,6 @@
|
||||
@mixin make-container($gutters: $grid-gutter-widths) {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
@if not $enable-flex {
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
@each $breakpoint in map-keys($gutters) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
@@ -40,12 +37,8 @@
|
||||
}
|
||||
|
||||
@mixin make-row($gutters: $grid-gutter-widths) {
|
||||
@if $enable-flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
} @else {
|
||||
@include clearfix();
|
||||
}
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@each $breakpoint in map-keys($gutters) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
@@ -58,14 +51,11 @@
|
||||
|
||||
@mixin make-col-ready($gutters: $grid-gutter-widths) {
|
||||
position: relative;
|
||||
min-height: 1px; // Prevent collapsing
|
||||
|
||||
// Prevent columns from becoming too narrow when at smaller grid tiers by
|
||||
// always setting `width: 100%;`. This works because we use `flex` values
|
||||
// later on to override this initial width.
|
||||
@if $enable-flex {
|
||||
width: 100%;
|
||||
}
|
||||
width: 100%;
|
||||
min-height: 1px; // Prevent collapsing
|
||||
|
||||
@each $breakpoint in map-keys($gutters) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
@@ -77,16 +67,12 @@
|
||||
}
|
||||
|
||||
@mixin make-col($size, $columns: $grid-columns) {
|
||||
@if $enable-flex {
|
||||
flex: 0 0 percentage($size / $columns);
|
||||
// Add a `max-width` to ensure content within each column does not blow out
|
||||
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
|
||||
// do not appear to require this.
|
||||
max-width: percentage($size / $columns);
|
||||
} @else {
|
||||
float: left;
|
||||
width: percentage($size / $columns);
|
||||
}
|
||||
flex: 0 0 percentage($size / $columns);
|
||||
// width: percentage($size / $columns);
|
||||
// Add a `max-width` to ensure content within each column does not blow out
|
||||
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
|
||||
// do not appear to require this.
|
||||
max-width: percentage($size / $columns);
|
||||
}
|
||||
|
||||
@mixin make-col-offset($size, $columns: $grid-columns) {
|
||||
|
||||
@@ -2,32 +2,30 @@
|
||||
//
|
||||
// Custom styles for additional flex alignment options.
|
||||
|
||||
@if $enable-flex {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
// Flex column reordering
|
||||
.flex#{$infix}-first { order: -1; }
|
||||
.flex#{$infix}-last { order: 1; }
|
||||
.flex#{$infix}-unordered { order: 0; }
|
||||
// Flex column reordering
|
||||
.flex#{$infix}-first { order: -1; }
|
||||
.flex#{$infix}-last { order: 1; }
|
||||
.flex#{$infix}-unordered { order: 0; }
|
||||
|
||||
// Alignment for every item
|
||||
.flex-items#{$infix}-top { align-items: flex-start; }
|
||||
.flex-items#{$infix}-middle { align-items: center; }
|
||||
.flex-items#{$infix}-bottom { align-items: flex-end; }
|
||||
// Alignment for every item
|
||||
.flex-items#{$infix}-top { align-items: flex-start; }
|
||||
.flex-items#{$infix}-middle { align-items: center; }
|
||||
.flex-items#{$infix}-bottom { align-items: flex-end; }
|
||||
|
||||
// Alignment per item
|
||||
.flex#{$infix}-top { align-self: flex-start; }
|
||||
.flex#{$infix}-middle { align-self: center; }
|
||||
.flex#{$infix}-bottom { align-self: flex-end; }
|
||||
// Alignment per item
|
||||
.flex#{$infix}-top { align-self: flex-start; }
|
||||
.flex#{$infix}-middle { align-self: center; }
|
||||
.flex#{$infix}-bottom { align-self: flex-end; }
|
||||
|
||||
// Horizontal alignment of item
|
||||
.flex-items#{$infix}-left { justify-content: flex-start; }
|
||||
.flex-items#{$infix}-center { justify-content: center; }
|
||||
.flex-items#{$infix}-right { justify-content: flex-end; }
|
||||
.flex-items#{$infix}-around { justify-content: space-around; }
|
||||
.flex-items#{$infix}-between { justify-content: space-between; }
|
||||
}
|
||||
// Horizontal alignment of item
|
||||
.flex-items#{$infix}-left { justify-content: flex-start; }
|
||||
.flex-items#{$infix}-center { justify-content: center; }
|
||||
.flex-items#{$infix}-right { justify-content: flex-end; }
|
||||
.flex-items#{$infix}-around { justify-content: space-around; }
|
||||
.flex-items#{$infix}-between { justify-content: space-between; }
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user