diff --git a/snippets/display-table-centering.md b/snippets/display-table-centering.md index 501ee335a..11d091a68 100644 --- a/snippets/display-table-centering.md +++ b/snippets/display-table-centering.md @@ -1,6 +1,6 @@ -### Display Table Centering +### Display table centering -Vertically and horitonally centers a child element within its parent element using `display: table` (as an alternative to `flexbox`). +Vertically and horizontally centers a child element within its parent element using `display: table` (as an alternative to `flexbox`). #### HTML diff --git a/snippets/last-item-will-all-available-height.md b/snippets/last-item-with-all-available-height.md similarity index 85% rename from snippets/last-item-will-all-available-height.md rename to snippets/last-item-with-all-available-height.md index 279c850a2..139d5ed6e 100644 --- a/snippets/last-item-will-all-available-height.md +++ b/snippets/last-item-with-all-available-height.md @@ -1,6 +1,6 @@ -### Last item with all available height +### Last item with remaining available height -Avoid vertical scrollbar and take advantage of current viewport space. Given the last element with all available space in current viewport, even when resizing window. +Take advantage of available viewport space. Give the last element the remaining available space in current viewport, even when resizing the window. #### HTML @@ -59,9 +59,9 @@ body { #### Explanation -1. `height: 100%` set the height of container as viewport height +1. `height: 100%` set the height of container as viewport height. 2. `display: flex` enables flexbox. -3. `flex-direction: column` set the direction of flex items' order from top to down +3. `flex-direction: column` set the direction of flex items' order from top to down. 4. `flex-grow: 1` the flexbox will apply remaining available space of container to last child element. The parent must have a viewport height. `flex-grow: 1` could be applied to the first or second element, which will have all available space. diff --git a/snippets/transform-centering.md b/snippets/transform-centering.md index 38b992d67..3e087d8ff 100644 --- a/snippets/transform-centering.md +++ b/snippets/transform-centering.md @@ -1,6 +1,6 @@ -### Transform Centering +### Transform centering -Vertically and horitonally centers a child element within its parent element using `position: absolute` and `transform: translate()` (as an alternative to `flexbox` or `display: table`). Similar to `flexbox`, this method does not require you to know the height or width of your parent or child so it is ideal for responsive applications. +Vertically and horizontally centers a child element within its parent element using `position: absolute` and `transform: translate()` (as an alternative to `flexbox` or `display: table`). Similar to `flexbox`, this method does not require you to know the height or width of your parent or child so it is ideal for responsive applications. #### HTML