feat(flex): add new classes (#16820)

packages/docs/src/examples/flex/flex-flex.vue

@@ -0,0 +1,15 @@
+<template>
+  <v-sheet class="d-flex flex-wrap bg-surface-variant">
+    <v-sheet class="flex-1-0 ma-2 pa-2">
+      I'm an element in an inline flexbox container!
+    </v-sheet>
+
+    <v-sheet class="ma-2 pa-2">
+      I'm a single element in an inline flexbox container!
+    </v-sheet>
+
+    <v-sheet class="flex-1-1-100 ma-2 pa-2">
+      I'm a single element in an inline flexbox container!
+    </v-sheet>
+  </v-sheet>
+</template>

packages/docs/src/pages/en/styles/flex.md

@@ -44,6 +44,60 @@ It is important to note that using any of the display classes above will result
 
 </alert>
 
+## Flex
+
+The flex utility classes can be used to modify the **flex** css property. This makes it easy to position flex items within a flex container.
+
+<example file="flex/flex-flex" />
+
+There are also responsive variations for `flex`:
+
+- **.flex-fill**
+- **.flex-sm-fill**
+- **.flex-md-fill**
+- **.flex-lg-fill**
+- **.flex-xl-fill**
+- **.flex-1-1**
+- **.flex-sm-1-1**
+- **.flex-md-1-1**
+- **.flex-lg-1-1**
+- **.flex-xl-1-1**
+- **.flex-1-0**
+- **.flex-sm-1-0**
+- **.flex-md-1-0**
+- **.flex-lg-1-0**
+- **.flex-xl-1-0**
+- **.flex-0-1**
+- **.flex-sm-0-1**
+- **.flex-md-0-1**
+- **.flex-lg-0-1**
+- **.flex-xl-0-1**
+- **.flex-0-0**
+- **.flex-sm-0-0**
+- **.flex-md-0-0**
+- **.flex-lg-0-0**
+- **.flex-xl-0-0**
+- **.flex-1-1-100**
+- **.flex-sm-1-1-100**
+- **.flex-md-1-1-100**
+- **.flex-lg-1-1-100**
+- **.flex-xl-1-1-100**
+- **.flex-1-0-100**
+- **.flex-sm-1-0-100**
+- **.flex-md-1-0-100**
+- **.flex-lg-1-0-100**
+- **.flex-xl-1-0-100**
+- **.flex-0-1-100**
+- **.flex-sm-0-1-100**
+- **.flex-md-0-1-100**
+- **.flex-lg-0-1-100**
+- **.flex-xl-0-1-100**
+- **.flex-0-0-100**
+- **.flex-sm-0-0-100**
+- **.flex-md-0-0-100**
+- **.flex-lg-0-0-100**
+- **.flex-xl-0-0-100**
+
 ## Flex direction
 
 By default, `d-flex` applies `flex-direction: row` and can generally be omitted. However, there may be situations where you need to explicitly define it.

packages/vuetify/src/styles/settings/_utilities.scss

@@ -58,7 +58,17 @@ $utilities: () !default;
       "flex": (
         responsive: true,
         property: flex,
-        values: (fill: 1 1 auto)
+        values: (
+          fill: 1 1 auto,
+          '1-1': 1 1 auto,
+          '1-0': 1 0 auto,
+          '0-1': 0 1 auto,
+          '0-0': 0 0 auto,
+          '1-1-100': 1 1 100%,
+          '1-0-100': 1 0 100%,
+          '0-1-100': 0 1 100%,
+          '0-0-100': 0 0 100%
+        )
       ),
       "flex-direction": (
         responsive: true,