Add gap support to flexboxes

mikke89/RmlUi#621

_includes/elements_and_properties.index

@@ -258,7 +258,7 @@
 {
 	"property": "column-gap",
 	"element": "",
-	"url": '<a href="/pages/rcss/tables.html#gap">',
+	"url": '<a href="/pages/rcss/flexboxes.html#gap">',
 	"title": "",
 	"parent_title": "",
 	"content": ""
@@ -426,7 +426,7 @@
 {
 	"property": "gap",
 	"element": "",
-	"url": '<a href="/pages/rcss/tables.html#gap">',
+	"url": '<a href="/pages/rcss/flexboxes.html#gap">',
 	"title": "",
 	"parent_title": "",
 	"content": ""
@@ -714,7 +714,7 @@
 {
 	"property": "row-gap",
 	"element": "",
-	"url": '<a href="/pages/rcss/tables.html#gap">',
+	"url": '<a href="/pages/rcss/flexboxes.html#gap">',
 	"title": "",
 	"parent_title": "",
 	"content": ""

pages/rcss/flexboxes.md

@@ -251,3 +251,20 @@ Inherited: | no
 Percentages: | N/A
 
 Determines how any available space in the flex container is distributed between multiple flex lines.
+
+#### Gaps between flex items
+{:#gap}
+
+`row-gap`{:.prop}, `column-gap`{:.prop}
+
+Value: | \<length\> \| \<percentage\>
+Initial: | 0px
+Applies to: | flex containers and `table`{:.value} elements
+Inherited: | no
+Percentages: | relative to the height and width, respectively, of the initial flex container or table block size
+
+Specifies the gap *between* flex items, as if adding a fixed-size margin between adjacent flex items. In RCSS, these properties can also be used on [tables](tables.html#gap).
+
+`gap`{:.prop}
+
+A shorthand property for setting both `row-gap`{:.prop} and `column-gap`{:.prop} properties, in that order. If only a single value is specified, it sets both gap properties to the given value.

pages/rcss/property_index.md

@@ -29,7 +29,7 @@ Name | Values | Initial value | Applies to | Inherited | Percentages | Notes
 [`clear`{:.prop}][clear] | left \| right \| both \| none | none | block-level elements | no | | 
 [`clip`{:.prop}][clip] | auto \| none \| always \| \<number\> | auto | all | no | | Controls interaction with ancestor element's clipping regions.
 [`color`{:.prop}][color] | \<colour\> | black | all | yes | | 
-[`column-gap`{:.prop}][gap] | \<length\> \| \<percentage\> | 0px | table elements | no | initial width of table | 
+[`column-gap`{:.prop}][gap] | \<length\> \| \<percentage\> | 0px | flex containers and table elements | no | initial width of flex container or table | 
 [`cursor`{:.prop}][cursor] | \<string\> | _empty_ | all | yes | | \<string\> refers an application specific cursor name.
 [`decorator`{:.prop}][decorator] | none \| \<name\> \| \<type\>( \<properties\> ) | none | all | no | | See [decorators](decorators.html) for details.
 [`display`{:.prop}][display] | inline \| block \| inline-block \| flow-root \| flex \| inline-flex \| table \| inline-table \| table-row-group \| table-row \| table-column-group \| table-column \| table-cell \| none | inline | all | no | | 
@@ -50,7 +50,7 @@ Name | Values | Initial value | Applies to | Inherited | Percentages | Notes
 [`font-size`{:.prop}][font-size] | \<length\> \| \<percentage\> | 12px | all | yes | size of parent font | 
 [`font-style`{:.prop}][font-style] | normal \| italic | normal | all | yes | | 'oblique' not supported.
 [`font-weight`{:.prop}][font-weight] | normal \| bold \| \<number \[1,1000\]\> | normal | all | yes | | Relative weights not supported.
-[`gap`{:.prop}][gap] | `row-gap`{:.prop} `column-gap`{:.prop} | | table elements | | | Replaces the CSS `border-spacing`{:.prop} property.
+[`gap`{:.prop}][gap] | `row-gap`{:.prop} `column-gap`{:.prop} | | flex containers and table elements | | | Also supports tables, replacing the CSS `border-spacing`{:.prop} property.
 [`height`{:.prop}][height] | \<length\> \| \<percentage\> \| auto | auto | block and replaced inline elements | no | height of containing block | 
 [`image-color`{:.prop}][image-color] | \<color\> | white | \<img\> elements and decorators | no | | Introduced for RCSS.
 [`justify-content`{:.prop}][justify-content] | flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly | flex-start | flex containers | no | | 
@@ -77,7 +77,7 @@ Name | Values | Initial value | Applies to | Inherited | Percentages | Notes
 [`pointer-events`{:.prop}][pointer-events] | auto \| none | auto | all | yes | | 
 [`position`{:.prop}][position] | static \| relative \| absolute \| fixed | static | all | no | | 'fixed' is positioned like 'absolute' but ignores scrolling.
 [`right`{:.prop}][top_right_bottom_left] | auto \| \<length\> \| \<percentage\> | auto | positioned elements | no | width of containing block | 
-[`row-gap`{:.prop}][gap] | \<length\> \| \<percentage\> | 0px | table elements | no | initial height of table | 
+[`row-gap`{:.prop}][gap] | \<length\> \| \<percentage\> | 0px | flex containers and table elements | no | initial height of flex container or table | 
 [`scrollbar-margin`{:.prop}][scrollbar-margin] | \<length\> | 0px | scrollbar-horizontal and scrollbar-vertical elements | no | | Introduced for RCSS. Specifies a bottom / right margin (depending on orientation) that will collapse with the scrollbar on the complementary axis.
 [`tab-index`{:.prop}][tab-index] | none \| auto | none | all | no | | Introduced for RCSS. Controls order of focus switching when the tab key is pressed.
 [`text-align`{:.prop}][text-align] | left \| right \| center | left | block-level elements | yes | | 'justify' not supported.
@@ -130,7 +130,7 @@ Name | Values | Initial value | Applies to | Inherited | Percentages | Notes
 [font-size]: fonts.html#font-size
 [font-style]: fonts.html#font-style
 [font-weight]: fonts.html#font-weight
-[gap]: tables.html#gap
+[gap]: flexboxes.html#gap
 [height]: visual_formatting_model_details.html#height
 [image-color]: colours_backgrounds.html#image-color
 [justify-content]: flexboxes.html#justify-content

pages/rcss/tables.md

@@ -123,7 +123,7 @@ Column groups and column elements are sized to cover the table columns they are
 
 #### Table width algorithm
 
-The table width is the sum of all table columns and the horizontal table spacing, such as `column-gap`{:.prop}, column margins, and table padding.
+The table width is the sum of all table columns and the horizontal table spacing, including `column-gap`{:.prop}, column margins, and table padding.
 
 The width of table columns are defined entirely by the width specified on column elements and/or the cells of the first row. In the following, *columns* mean any of the aforementioned elements.
 
@@ -137,7 +137,7 @@ Unlike in CSS, column groups and columns can use horizontal `padding`{:.prop}, `
 
 #### Table height algorithm
 
-The table height is determined by the sum of the height of all its rows, in addition to vertical spacing such as `row-gap`{:.prop}, row margins, and table padding.
+The table height is determined by the sum of the height of all its rows, in addition to vertical spacing, including `row-gap`{:.prop}, row margins, and table padding.
 
 Each row has their height determined as follows:
 
@@ -173,11 +173,7 @@ The alignment is done by adding top or bottom padding to the cell element. Unlik
 
 ### Borders
 
-The model for setting borders on tables in RCSS is similar to the separated borders model in CSS (`border-collapse: separate`{:.value}).
-
-That is, each cell element control their own borders separately.
-
-However, unlike CSS, borders can still be added to rows, row groups, columns, and column groups. They will be separated from the cell borders, as if extending the borders of their inner elements.
+The model for setting borders on tables in RCSS is similar to the separated borders model in CSS (`border-collapse: separate`{:.value}). That is, each cell element control their own borders separately. However, unlike CSS, borders can still be added to rows, row groups, columns, and column groups. They will be separated from the cell borders, as if extending the borders of their inner elements.
 
 
 #### Cell spacing
@@ -189,9 +185,9 @@ Value: | \<length\> \| \<percentage\>
 Initial: | 0px
 Applies to: | `table`{:.value} elements
 Inherited: | no
-Percentages: | relative to the height and width, respectively, of the initial table block size
+Percentages: | relative to the height and width, respectively, of the initial flex container or table block size
 
-Specifies the gap *between* table cells. Like the CSS property `border-spacing`{:.prop}, except that spacing is not applied before and after the first and last cell, respectively. Instead, use `padding`{:.prop} on the table element to add spacing between the table border and its cells.
+In RCSS, these properties also apply to tables, in addition to [flexboxes](flexboxes.html#gap). For tables, they specify the gap *between* table cells. Like the CSS property `border-spacing`{:.prop}, except that spacing is not applied before and after the first and last cell, respectively. Instead, use `padding`{:.prop} on the table element to add spacing between the table border and its cells.
 
 `gap`{:.prop}