andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

snippet consistency fixes

Browse Source
This commit is contained in:
atomiks
2018-10-01 14:14:41 +10:00
parent 416f87d4ea
commit 41580fe7a3
3 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
snippets/display-table-centering.md
View File

@ -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 #### HTML

8
snippets/last-item-will-all-available-height.md → snippets/last-item-with-all-available-height.md
View File

@ -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 #### HTML
@ -59,9 +59,9 @@ body {
#### Explanation #### 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. 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. 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. 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.

4
snippets/transform-centering.md
View File

@ -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 #### HTML