Apply suggestions from code review

Co-authored-by: Kristin Bradley <kristin.bradley@hashicorp.com>
Co-authored-by: Dylan Hyun <dylan.hyun@hashicorp.com>

Author: 3 people

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

@@ -29,7 +29,7 @@
     If a `@wrap` parameter is provided, the flex items can wrap onto multiple lines when there is not enough space in the container to fit them all in a single line.
   </C.Property>
   <C.Property @name="gap" @type="enum|[enum,enum]" @values={{array "4" "8" "12" "16" "24" "32" "48"}}>
-    Use the `@gap` argument to control the spacing between flex items. To differentiate the vertical and horizontal spacing between items when they wrap on multiple rows, provide an array of two values , where the first value refers to the vertical gap between "rows" of items (`row-gap` in CSS), the second one to the horizontal spacing between "columns" of items (`column-gap` in CSS).
+    Use the `@gap` argument to control the spacing between flex items. To differentiate the vertical and horizontal spacing between items when they wrap on multiple rows, provide an array of two values, where the first value refers to the vertical gap between "rows" of items (`row-gap` in CSS), and the second one to the horizontal spacing between "columns" of items (`column-gap` in CSS).
   </C.Property>
   <C.Property @name="isInline" @type="boolean" @default="false">
     If an `@isInline` parameter is provided, then the element will be displayed as `inline-flex` (useful to achieve specific layouts). Otherwise, it will have a `flex` layout.
@@ -50,24 +50,24 @@ The `Layout::Flex::Item` component, yielded as contextual component, to be used
     HTML tag to be used to render the flex item element.
   </C.Property>
   <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)).
+    The value (size) of the CSS `flex-basis` property, which sets the initial main size of 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 can have.</em>
+    <em>Notice: when the value is set to `0`, a CSS class is used to apply the `flex-basis` property. In all other cases, an inline `style` declaration is used to accommodate 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 can have.</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 other cases, an inline `style` declaration is used, to accommodate 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 can have.</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 other cases, an inline `style` declaration is used, to accommodate 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)
+    When this special argument is set to `true`, it applies `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)
     <br/><br/>
-    <em>Notice: this may have accessibility implications, be considerate in how this special argument is used and how this impacts the content of the flex item element.</em>
+    <em>Notice: this may have accessibility implications; be considerate in how this special argument is used and how this impacts the content of the flex item element.</em>
   </C.Property>
   <C.Property @name="yield">
     Elements passed as children are yielded as inner content of the element.

website/docs/layouts/flex/partials/code/how-to-use.md

@@ -4,15 +4,15 @@
 
 It's much easier to use this component if one is familiar with the CSS3 Flexible Box specifications.
 <br/>
-A good and quick introduction to flexbox can be found in [**this MDN guide**](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox).
+A good and quick introduction to flexbox can be found in [this MDN guide](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox).
 
 !!!
 
 The `Layout::Flex` and optional `Layout::Flex::Item` components provide a way to quickly build out flexbox-based layouts of components or elements without needing to write a lot of custom CSS code or understand all the intricacies of CSS flexbox styles.
 
 ### Basic usage
 
-The simplest way to implementat a flexbox layout is by using the `Layout::Flex` component to wrap some content:
+The simplest way to implement a flexbox layout is by using the `Layout::Flex` component to wrap some content:
 
 ```handlebars{data-execute=false}
 <Hds::Layout::Flex>