added more content to the Flex documentation

Author: didoo

website/app/styles/app.scss

@@ -51,6 +51,7 @@
 @use "pages/components/table" as components-table;
 @use "pages/components/tabs" as components-tabs;
 @use "pages/layouts/app-frame" as layouts-app-frame;
+@use "pages/layouts/flex" as layouts-flex;
 @use "pages/whats-new/changelog" as whats-new-changelog;
 @use "pages/patterns/table-multi-select" as patterns-table-multi-select;
 @use "pages/patterns/filter-patterns" as patterns-filter-patterns;

website/app/styles/pages/layouts/app-frame.scss

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-// COMPONENTS > APP-FRAME
+// LAYOUTS > APP-FRAME
 
 #show-content-layouts-app-frame {
   .doc-app-frame-mock-viewport {

website/app/styles/pages/layouts/flex.scss

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+// LAYOUTS > FLEX
+
+#show-content-layouts-flex {
+  .doc-flex-media-avatar {
+    width: 50px;
+    height: 50px;
+    border-radius: 8px;
+  }
+
+  .doc-flex-cards-item {
+    width: 100%;
+    height: 100%;
+    padding: 18px 12px;
+    text-align: center;
+  }
+
+  .doc-flex-fixed-height-container {
+    height: 400px;
+  }
+
+  .doc-flex-outlined-container {
+    outline: 1px dotted var(--doc-color-gray-400);
+  }
+
+  .doc-flex-margin-left-auto {
+    margin-left: auto;
+  }
+}

website/docs/layouts/flex/partials/code/component-api.md

@@ -49,17 +49,17 @@ The `Layout::Flex::Item` component, yielded as contextual component, to be used
   <C.Property @name="basis" @type="string|0">
     The value (size) of the CSS `flex-basis` property, which sets the initial main size the flex item (for a technical explanation: [see MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis)).
     <br/><br/>
-    <em>Notice: when the value is set to `0` a CSS class is used to apply the `flex-basis` property; in all the other cases an inline `style` declaration is used, to accomodate for all the possible values that this CSS property allows.</em>
+    <em>Notice: when the value is set to `0` a CSS class is used to apply the `flex-basis` property; in all the other cases an inline `style` declaration is used, to accomodate for all the possible values that this CSS property can have.</em>
   </C.Property>
   <C.Property @name="grow" @type="boolean|number|string">
     The value (size or keyword) of the CSS `flex-grow` property, which sets the flex grow factor of the flex item (for a technical explanation:  [see MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow)).
     <br/><br/>
-    <em>Notice: when the value is set to `true/false` or `0/1` a CSS class is used to apply the `flex-grow` property; in all the other cases an inline `style` declaration is used, to accomodate for all the possible values that this CSS property allows.</em>
+    <em>Notice: when the value is set to `true/false` or `0/1` a CSS class is used to apply the `flex-grow` property; in all the other cases an inline `style` declaration is used, to accomodate for all the possible values that this CSS property can have.</em>
   </C.Property>
   <C.Property @name="shrink" @type="boolean|number|string">
     The value (size or keyword) of the CSS `flex-shrink` property, which sets sets the flex shrink factor of the flex item (for a technical explanation: [see MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink)).
     <br/><br/>
-    <em>Notice: when the value is set to `true/false` or `0/1` a CSS class is used to apply the `flex-shrink` property; in all the other cases an inline `style` declaration is used, to accomodate for all the possible values that this CSS property allows.</em>
+    <em>Notice: when the value is set to `true/false` or `0/1` a CSS class is used to apply the `flex-shrink` property; in all the other cases an inline `style` declaration is used, to accomodate for all the possible values that this CSS property can have.</em>
   </C.Property>
   <C.Property @name="enableCollapseBelowContentSize" @type="boolean">
     When this special argument is set to `true` it applies a `min-width: 0` to the element, allowing the flex item to shrink below its content's intrinsic minimum width (e.g. used with elliptized text)