fix(css): add the missing css classes to flex and float utils (#17570)

fixes #17569

core/src/css/flex-utils.scss

@@ -1,31 +1,37 @@
 // Flex Utilities
 // --------------------------------------------------
-// Creates flex attributes to align flex containers
+// Creates flex classes to align flex containers
 // and items
 
 // Align Self
 // --------------------------------------------------
 
+.ion-align-self-start,
 [align-self-start] {
   align-self: flex-start !important;
 }
 
+.ion-align-self-end,
 [align-self-end] {
   align-self: flex-end !important;
 }
 
+.ion-align-self-center,
 [align-self-center] {
   align-self: center !important;
 }
 
+.ion-align-self-stretch,
 [align-self-stretch] {
   align-self: stretch !important;
 }
 
+.ion-align-self-baseline,
 [align-self-baseline] {
   align-self: baseline !important;
 }
 
+.ion-align-self-auto,
 [align-self-auto] {
   align-self: auto !important;
 }
@@ -34,14 +40,17 @@
 // Flex Wrap
 // --------------------------------------------------
 
+.ion-wrap,
 [wrap] {
   flex-wrap: wrap !important;
 }
 
+.ion-nowrap,
 [nowrap] {
   flex-wrap: nowrap !important;
 }
 
+.ion-wrap-reverse,
 [wrap-reverse] {
   flex-wrap: wrap-reverse !important;
 }
@@ -50,26 +59,32 @@
 // Justify Content
 // --------------------------------------------------
 
+.ion-justify-content-start,
 [justify-content-start] {
   justify-content: flex-start !important;
 }
 
+.ion-justify-content-center,
 [justify-content-center] {
   justify-content: center !important;
 }
 
+.ion-justify-content-end,
 [justify-content-end] {
   justify-content: flex-end !important;
 }
 
+.ion-justify-content-around,
 [justify-content-around] {
   justify-content: space-around !important;
 }
 
+.ion-justify-content-between,
 [justify-content-between] {
   justify-content: space-between !important;
 }
 
+.ion-justify-content-evenly,
 [justify-content-evenly] {
   justify-content: space-evenly !important;
 }
@@ -78,22 +93,27 @@
 // Align Items
 // --------------------------------------------------
 
+.ion-align-items-start,
 [align-items-start] {
   align-items: flex-start !important;
 }
 
+.ion-align-items-center,
 [align-items-center] {
   align-items: center !important;
 }
 
+.ion-align-items-end,
 [align-items-end] {
   align-items: flex-end !important;
 }
 
+.ion-align-items-stretch,
 [align-items-stretch] {
   align-items: stretch !important;
 }
 
+.ion-align-items-baseline,
 [align-items-baseline] {
   align-items: baseline !important;
 }

core/src/css/float-elements.scss

@@ -3,26 +3,30 @@
 
 // Float Elements
 // --------------------------------------------------
-// Creates float attributes based on screen size
+// Creates float classes based on screen size
 
 @each $breakpoint in map-keys($screen-breakpoints) {
   $infix: breakpoint-infix($breakpoint, $screen-breakpoints);
 
   @include media-breakpoint-up($breakpoint, $screen-breakpoints) {
-    // Provide `[float-{bp}]` attributes for floating the element based
+    // Provide `.ion-float-{bp}-{side}` classes for floating the element based
-    // on the breakpoint
+    // on the breakpoint and side
+    .ion-float#{$infix}-left,
     [float#{$infix}-left] {
       @include float(left, !important);
     }
 
+    .ion-float#{$infix}-right,
     [float#{$infix}-right] {
       @include float(right, !important);
     }
 
+    .ion-float#{$infix}-start,
     [float#{$infix}-start] {
       @include float(start, !important);
     }
 
+    .ion-float#{$infix}-end,
     [float#{$infix}-end] {
       @include float(end, !important);
     }