chore(docs): update grid layout docs (closes #5332) (#5333)

tmorehouse · jacobmllr95 · web-flow · commit a837fc026d7e · 2020-05-09T11:56:37.000+02:00
* chore(docs): update grid layout docs (closes #5332) * Update package.json * Update README.md Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>
diff --git a/src/components/layout/README.md b/src/components/layout/README.md
@@ -450,8 +450,15 @@ each tier as needed. See the example below for a better idea of how it all works
 
 Use flexbox alignment utilities to vertically and horizontally align columns.
 
+**Note:** Internet Explorer 11 does not support vertical alignment of flex items when the flex
+container has a `min-height` as shown below.
+[See Flexbugs #3 for more details](https://github.com/philipwalton/flexbugs#flexbug-3).
+
 ### Vertical alignment
 
+For vertical alignment of all grid cells in a row, use the `align-v` prop on `<b-row>`. Possible
+values are `'start'`, `'center'`, `'end'`, `'baseline'`, and `'stretch'`:
+
 ```html
 <b-container class="bv-example-row bv-example-row-flex-cols">
   <b-row align-v="start">
@@ -471,25 +478,47 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
     <b-col>One of three columns</b-col>
     <b-col>One of three columns</b-col>
   </b-row>
+
+  <b-row align-v="baseline">
+    <b-col style="font-size: 0.75rem;">One of three columns</b-col>
+    <b-col>One of three columns</b-col>
+    <b-col style="font-size: 1.25rem;">One of three columns</b-col>
+  </b-row>
+
+  <b-row align-v="stretch">
+    <b-col>One of three columns</b-col>
+    <b-col>One of three columns</b-col>
+    <b-col>One of three columns</b-col>
+  </b-row>
 </b-container>
 
 <!-- b-grid-vertical-alignment.vue -->
 ```
 
+For individual grid cell vertical alignment, use the `align-self` prop on `<b-col>`. Possible values
+are `'start'`, `'center'`, `'end'`, `'baseline'`, and `'stretch'`:
+
 ```html
 <b-container class="bv-example-row bv-example-row-flex-cols">
   <b-row>
     <b-col align-self="start">One of three columns</b-col>
     <b-col align-self="center">One of three columns</b-col>
     <b-col align-self="end">One of three columns</b-col>
   </b-row>
+  <b-row>
+    <b-col align-self="baseline">One of two columns</b-col>
+    <b-col align-self="stretch">One of two  columns</b-col>
+  </b-row>
 </b-container>
 
 <!-- b-grid-align-self.vue -->
 ```
 
 ### Horizontal alignment
 
+To horizontally align grid cells within a row, use the `align-h` prop on `<b-row>`. Possible values
+are: `'start'`, `'center'`, `'end'`, `'around'`, and `'between'`:
+
 ```html
 <b-container class="bv-example-row">
   <b-row align-h="start">
diff --git a/src/components/layout/package.json b/src/components/layout/package.json
@@ -24,7 +24,7 @@
           },
           {
             "prop": "alignV",
-            "description": "Vertical alignment of all columns in a row: 'start', 'center', or 'end'"
+            "description": "Vertical alignment of all columns in a row: 'start', 'center', 'end', 'baseline', or 'stretch'"
           },
           {
             "prop": "alignH",
@@ -66,7 +66,7 @@
         "props": [
           {
             "prop": "alignSelf",
-            "description": "Vertical alignment of the grid cell with respect to the row: 'start', 'center', or 'end'"
+            "description": "Vertical alignment of the grid cell with respect to the row: 'start', 'center', 'end', 'baseline', or 'stretch'"
           },
           {
             "prop": "col",

Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@`
`24`	`24`	`},`
`25`	`25`	`{`
`26`	`26`	`"prop": "alignV",`
`27`		`- "description": "Vertical alignment of all columns in a row: 'start', 'center', or 'end'"`
	`27`	`+ "description": "Vertical alignment of all columns in a row: 'start', 'center', 'end', 'baseline', or 'stretch'"`
`28`	`28`	`},`
`29`	`29`	`{`
`30`	`30`	`"prop": "alignH",`
`@@ -66,7 +66,7 @@`
`66`	`66`	`"props": [`
`67`	`67`	`{`
`68`	`68`	`"prop": "alignSelf",`
`69`		`- "description": "Vertical alignment of the grid cell with respect to the row: 'start', 'center', or 'end'"`
	`69`	`+ "description": "Vertical alignment of the grid cell with respect to the row: 'start', 'center', 'end', 'baseline', or 'stretch'"`
`70`	`70`	`},`
`71`	`71`	`{`
`72`	`72`	`"prop": "col",`