docs(flex): combine examples for align-content

Author: J-Sek

packages/docs/src/examples/flex/flex-align-content-around.vue

@@ -0,0 +1,26 @@
+<template>
+  <v-container class="d-flex flex-wrap ga-6" fluid>
+    <div v-for="variant in variants" :key="variant.value">
+      <div class="text-caption mb-2">align-content-{{ variant.value }}</div>
+      <v-sheet
+        :class="`d-flex align-content-${variant.value} flex-wrap bg-surface-variant`"
+        height="200"
+        width="300"
+      >
+        <v-sheet v-for="n in 5" :key="n" class="ma-2 pa-2">
+          Flex item
+        </v-sheet>
+      </v-sheet>
+    </div>
+  </v-container>
+</template>
+
+<script setup>
+  const variants = [
+    { value: 'start' },
+    { value: 'center' },
+    { value: 'end' },
+    { value: 'space-between' },
+    { value: 'space-around' },
+  ]
+</script>

packages/docs/src/examples/flex/flex-align-content-between.vue

@@ -516,15 +516,7 @@ You can change the visual order of flex items with the `order` utilities.
 
 The `align-content` flex setting can be changed using the flex align-content classes. This by default will modify the wrapped flexbox content across the **y-axis** but is reversed when using `flex-direction: column`, modifying the **x-axis**. Choose from `start`, `end`, `center`, `space-between`, `space-around`, `space-evenly` or `stretch` (browser default).
 
-<ExamplesExample file="flex/flex-align-content-start" />
-
-<ExamplesExample file="flex/flex-align-content-end" />
-
-<ExamplesExample file="flex/flex-align-content-center" />
-
-<ExamplesExample file="flex/flex-align-content-between" />
-
-<ExamplesExample file="flex/flex-align-content-around" />
+<ExamplesExample file="flex/flex-align-content" />
 
 ## Flex grow and shrink