Minor: Capitalization: CSS directory (#34305)

mdn · Jun 21, 2024 · fb409b8 · fb409b8
1 parent 3c5185e
commit fb409b8
Show file tree

Hide file tree

Showing 81 changed files with 369 additions and 321 deletions.
diff --git a/files/en-us/web/css/align-content/index.md b/files/en-us/web/css/align-content/index.md
@@ -9,7 +9,7 @@ browser-compat: css.properties.align-content
 
 The [CSS](/en-US/docs/Web/CSS) **`align-content`** property sets the distribution of space between and around content items along a [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout)'s [cross axis](/en-US/docs/Glossary/Cross_Axis), or a [grid](/en-US/docs/Web/CSS/CSS_grid_layout) or [block-level](/en-US/docs/Glossary/Block-level_content) element's block axis.
 
-The interactive example below uses Grid Layout to demonstrate some of the values of this property.
+The interactive example below uses grid layout to demonstrate some of the values of this property.
 
 {{EmbedInteractiveExample("pages/css/align-content.html")}}
 
@@ -243,10 +243,10 @@ In [block layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_block_a
 
 ## See also
 
-- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_
-- CSS Flexbox Guide: _[Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)_
-- CSS Grid Guide: _[Box alignment in CSS Grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)_
-- [CSS Box Alignment](/en-US/docs/Web/CSS/CSS_box_alignment)
+- [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)
+- [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)
+- [Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)
+- [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment)
 - [Block and inline layout in normal flow](/en-US/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow)
 - [Block-level_content](/en-US/docs/Glossary/Block-level_content)
 - {{CSSXRef("display")}}
diff --git a/files/en-us/web/css/align-items/index.md b/files/en-us/web/css/align-items/index.md
@@ -283,7 +283,7 @@ display.addEventListener("change", (evt) => {
 - {{cssxref("place-items")}} shorthand
 - [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)
 - [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)
-- [Box alignment in CSS Grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)
+- [Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)
 - [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module
 - [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module
 - [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) module
diff --git a/files/en-us/web/css/align-self/index.md b/files/en-us/web/css/align-self/index.md
@@ -7,7 +7,7 @@ browser-compat: css.properties.align-self
 
 {{CSSRef}}
 
-The **`align-self`** [CSS](/en-US/docs/Web/CSS) property overrides a grid or flex item's {{cssxref("align-items")}} value. In Grid, it aligns the item inside the {{glossary("Grid Areas", "grid area")}}. In Flexbox, it aligns the item on the {{glossary("cross axis")}}.
+The **`align-self`** [CSS](/en-US/docs/Web/CSS) property overrides a grid or flex item's {{cssxref("align-items")}} value. In grid, it aligns the item inside the {{glossary("Grid Areas", "grid area")}}. In flexbox, it aligns the item on the {{glossary("cross axis")}}.
 
 {{EmbedInteractiveExample("pages/css/align-self.html")}}
 
@@ -138,8 +138,8 @@ div:nth-child(3) {
 
 ## See also
 
-- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_
-- CSS Flexbox Guide: _[Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)_
-- CSS Grid Guide: _[Box alignment in CSS Grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)_
-- [CSS Box Alignment](/en-US/docs/Web/CSS/CSS_box_alignment)
+- [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)
+- [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)
+- [Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)
+- [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment)
 - The {{cssxref("align-items")}} property
diff --git a/files/en-us/web/css/box-align/index.md b/files/en-us/web/css/box-align/index.md
@@ -10,7 +10,7 @@ browser-compat: css.properties.box-align
 
 {{CSSRef}}{{Non-standard_header}}{{Deprecated_Header}}
 
-> **Warning:** This is a property of the original CSS Flexible Box Layout Module draft, and has been replaced by a newer standard.
+> **Warning:** This is a property of the original CSS flexible box layout Module draft, and has been replaced by a newer standard.
 
 The **`box-align`** [CSS](/en-US/docs/Web/CSS) property specifies how an element aligns its contents across its layout in a perpendicular direction. The effect of the property is only visible if there is extra space in the box.
 

diff --git a/files/en-us/web/css/box-direction/index.md b/files/en-us/web/css/box-direction/index.md
@@ -10,7 +10,7 @@ browser-compat: css.properties.box-direction
 
 {{CSSRef}}{{Non-standard_header}}{{Deprecated_Header}}
 
-> **Warning:** This is a property of the original CSS Flexible Box Layout Module draft, and has been replaced by a newer standard. The `-moz-box-direction` will only be used for XUL while the previous standard `box-direction` has been replaced by `flex-direction`. See [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) for information about the current standard.
+> **Warning:** This is a property of the original CSS flexible box layout Module draft, and has been replaced by a newer standard. The `-moz-box-direction` will only be used for XUL while the previous standard `box-direction` has been replaced by `flex-direction`. See [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) for information about the current standard.
 
 The **`box-direction`** [CSS](/en-US/docs/Web/CSS) property specifies whether a box lays out its contents normally (from the top or left edge), or in reverse (from the bottom or right edge).
 

diff --git a/files/en-us/web/css/box-flex-group/index.md b/files/en-us/web/css/box-flex-group/index.md
@@ -10,7 +10,7 @@ browser-compat: css.properties.box-flex-group
 
 {{CSSRef}}{{Non-standard_Header}}{{Deprecated_Header}}
 
-> **Warning:** This is a property of the original CSS Flexible Box Layout Module draft. It has been replaced in the specification. See [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) for information about the current standard.
+> **Warning:** This is a property of the original CSS flexible box layout Module draft. It has been replaced in the specification. See [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) for information about the current standard.
 
 The **`box-flex-group`** [CSS](/en-US/docs/Web/CSS) property assigns the flexbox's child elements to a flex group.
 
@@ -48,7 +48,7 @@ box-flex-group =
 
 ### Simple usage example
 
-In the original Flexbox spec, `box-flex-group` could be used to assign flex children to different groups to distribute flexible space between:
+In the original flexbox spec, `box-flex-group` could be used to assign flex children to different groups to distribute flexible space between:
 
 ```css
 article:nth-child(1) {

diff --git a/files/en-us/web/css/box-flex/index.md b/files/en-us/web/css/box-flex/index.md
@@ -10,7 +10,7 @@ browser-compat: css.properties.box-flex
 
 {{CSSRef}}{{Non-standard_Header}}{{Deprecated_Header}}
 
-> **Warning:** This is a property for controlling parts of the XUL box model. It does not match either the old CSS Flexible Box Layout Module drafts for '`box-flex`' (which were based on this property) or the behavior of '`-webkit-box-flex`' (which is based on those drafts). See [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) for information about the current standard.
+> **Warning:** This is a property for controlling parts of the XUL box model. It does not match either the old CSS flexible box layout Module drafts for '`box-flex`' (which were based on this property) or the behavior of '`-webkit-box-flex`' (which is based on those drafts). See [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) for information about the current standard.
 
 The **`-moz-box-flex`** and **`-webkit-box-flex`** [CSS](/en-US/docs/Web/CSS) properties specify how a `-moz-box` or `-webkit-box` grows to fill the box that contains it, in the direction of the containing box's layout.
 

diff --git a/files/en-us/web/css/box-lines/index.md b/files/en-us/web/css/box-lines/index.md
@@ -10,7 +10,7 @@ browser-compat: css.properties.box-lines
 
 {{CSSRef}}{{Non-standard_header}}{{Deprecated_Header}}
 
-> **Warning:** This is a property of the original CSS Flexible Box Layout Module draft. It has been replaced in the specification. See [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) for information about the current standard.
+> **Warning:** This is a property of the original CSS flexible box layout Module draft. It has been replaced in the specification. See [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) for information about the current standard.
 
 The **`box-lines`** [CSS](/en-US/docs/Web/CSS) property determines whether the box may have a single or multiple lines (rows for horizontally oriented boxes, columns for vertically oriented boxes).
 

diff --git a/files/en-us/web/css/box-ordinal-group/index.md b/files/en-us/web/css/box-ordinal-group/index.md
@@ -10,7 +10,7 @@ browser-compat: css.properties.box-ordinal-group
 
 {{CSSRef}}{{Non-standard_Header}}{{Deprecated_Header}}
 
-> **Warning:** This is a property of the original CSS Flexible Box Layout Module draft. It has been replaced in the specification. See [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) for information about the current standard.
+> **Warning:** This is a property of the original CSS flexible box layout Module draft. It has been replaced in the specification. See [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) for information about the current standard.
 
 The **`box-ordinal-group`** [CSS](/en-US/docs/Web/CSS) property assigns the flexbox's child elements to an ordinal group.
 

diff --git a/files/en-us/web/css/box-orient/index.md b/files/en-us/web/css/box-orient/index.md
@@ -10,7 +10,7 @@ browser-compat: css.properties.box-orient
 
 {{CSSRef}}{{Non-standard_header}}{{Deprecated_Header}}
 
-> **Warning:** This is a property of the original CSS Flexible Box Layout Module draft, and has been replaced by a newer standard. See [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) for information about the current standard.
+> **Warning:** This is a property of the original CSS flexible box layout Module draft, and has been replaced by a newer standard. See [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) for information about the current standard.
 
 The **`box-orient`** [CSS](/en-US/docs/Web/CSS) property sets whether an element lays out its contents horizontally or vertically.
 

diff --git a/files/en-us/web/css/box-pack/index.md b/files/en-us/web/css/box-pack/index.md
@@ -10,7 +10,7 @@ browser-compat: css.properties.box-pack
 
 {{CSSRef}}{{Non-standard_header}}{{Deprecated_Header}}
 
-> **Warning:** This is a property of the original CSS Flexible Box Layout Module draft, and has been replaced by a newer standard. See [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) for information about the current standard.
+> **Warning:** This is a property of the original CSS flexible box layout Module draft, and has been replaced by a newer standard. See [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) for information about the current standard.
 
 The **`-moz-box-pack`** and **`-webkit-box-pack`** [CSS](/en-US/docs/Web/CSS) properties specify how a `-moz-box` or `-webkit-box` packs its contents in the direction of its layout. The effect of this is only visible if there is extra space in the box.
 

diff --git a/files/en-us/web/css/column-gap/index.md b/files/en-us/web/css/column-gap/index.md
@@ -9,7 +9,7 @@ browser-compat: css.properties.column-gap
 
 The **`column-gap`** [CSS](/en-US/docs/Web/CSS) property sets the size of the gap ({{glossary("Gutters","gutter")}}) between an element's columns.
 
-Initially a part of [Multi-column Layout](/en-US/docs/Web/CSS/CSS_multicol_layout), the definition of `column-gap` has been broadened to include multiple layout methods. Now specified in [Box Alignment](/en-US/docs/Web/CSS/CSS_box_alignment), it may be used in Multi-column, Flexible Box, and Grid layouts.
+Initially a part of [Multi-column Layout](/en-US/docs/Web/CSS/CSS_multicol_layout), the definition of `column-gap` has been broadened to include multiple layout methods. Now specified in [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment), it may be used in multi-column, flexible box, and grid layouts.
 
 Early versions of the specification called this property `grid-column-gap`, and to maintain compatibility with legacy websites, browsers will still accept `grid-column-gap` as an alias for `column-gap`.
 
@@ -176,6 +176,7 @@ div:nth-of-type(3n) {
 
 ## See also
 
-- Related CSS properties: {{CSSxRef("row-gap")}}, {{CSSxRef("gap")}}
-- Grid Layout Guide: _[Basic concepts of grid layout - Gutters](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#gutters)_
-- Multi-column Layout Guide: _[Styling Columns](/en-US/docs/Web/CSS/CSS_multicol_layout/Styling_columns)_
+- {{CSSxRef("row-gap")}}
+- {{CSSxRef("gap")}}
+- [Basic concepts of grid layout: gutters](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#gutters)
+- [Styling Columns](/en-US/docs/Web/CSS/CSS_multicol_layout/Styling_columns)
diff --git a/files/en-us/web/css/css_box_alignment/box_alignment_in_flexbox/index.md b/files/en-us/web/css/css_box_alignment/box_alignment_in_flexbox/index.md
@@ -6,7 +6,7 @@ page-type: guide
 
 {{CSSRef}}
 
-The [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) Specification details how alignment works in various layout methods; on this page, we explore how box alignment works in the context of Flexbox. As this page aims to detail things which are specific to Flexbox and box alignment, it should be read in conjunction with the main [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) page which details the common features of box alignment across layout methods.
+The [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) Specification details how alignment works in various layout methods; on this page, we explore how box alignment works in the context of flexbox. As this page aims to detail things which are specific to flexbox and box alignment, it should be read in conjunction with the main [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) page which details the common features of box alignment across layout methods.
 
 ## Basic example
 
@@ -18,7 +18,7 @@ In this example, three flex items are aligned on the main axis using {{cssxref("
 
 Flexbox respects the writing mode of the document, therefore if you are working in English and set {{cssxref("justify-content")}} to `flex-end` this will align the items to the end of the flex container. If you are working with {{cssxref("flex-direction")}} set to `row`, this alignment will be in the inline direction.
 
-However, in Flexbox you can change the main axis by setting `flex-direction` to `column`. In this case, `justify-content` will align items in the block direction. Therefore it is easiest to think about the main and cross axis when working in Flexbox like so:
+However, in flexbox you can change the main axis by setting `flex-direction` to `column`. In this case, `justify-content` will align items in the block direction. Therefore it is easiest to think about the main and cross axis when working in flexbox like so:
 
 - The main axis = direction set by `flex-direction` = alignment via `justify-content`
 - The cross axis = runs across the main axis = alignment via `align-content`, `align-self`/`align-items`
@@ -33,19 +33,19 @@ However, in Flexbox you can change the main axis by setting `flex-direction` to
 - {{cssxref("align-items")}}
 - {{cssxref("align-content")}}
 
-### There is no justify-self in Flexbox
+### There is no justify-self in flexbox
 
 On the main axis, Flexbox deals with our content as a group. The amount of space required to lay out the items is calculated, and the leftover space is then available for distribution. The `justify-content` property controls how that leftover space is used. Set `justify-content: flex-end` and the extra space is placed before the items, `justify-content: space-around` and it is placed either side of the item in that dimension, etc.
 
-This means that a `justify-self` property does not make sense in Flexbox as we are always dealing with moving the entire group of items around.
+This means that a `justify-self` property does not make sense in flexbox as we are always dealing with moving the entire group of items around.
 
 On the cross axis `align-self` makes sense as we potentially have additional space in the flex container in that dimension, in which a single item can be moved to the start and end.
 
 ## Alignment and auto margins
 
-There is a specific use case in Flexbox where we might think that a `justify-self` property is what we need, and this is when we want to split a set of flex items, perhaps to create a split navigation pattern. For this use case, we can use an `auto` margin. A margin set to `auto` will absorb all available space in its dimension. This is how centering a block with auto margins works. By setting the left and right margin to `auto`, both sides of our block try to take up all of the available space and so push the box into the center.
+There is a specific use case in flexbox where we might think that a `justify-self` property is what we need, and this is when we want to split a set of flex items, perhaps to create a split navigation pattern. For this use case, we can use an `auto` margin. A margin set to `auto` will absorb all available space in its dimension. This is how centering a block with auto margins works. By setting the left and right margin to `auto`, both sides of our block try to take up all of the available space and so push the box into the center.
 
-By setting a {{cssxref("margin")}} of `auto` on one item in a set of flex items all aligned to start, we can create a split navigation. This works well with Flexbox and the alignment properties. As soon as there is no space available for the auto margin, the item behaves in the same way as all the other flex items and shrinks to try to fit into space.
+By setting a {{cssxref("margin")}} of `auto` on one item in a set of flex items all aligned to start, we can create a split navigation. This works well with flexbox and the alignment properties. As soon as there is no space available for the auto margin, the item behaves in the same way as all the other flex items and shrinks to try to fit into space.
 
 {{EmbedGHLiveSample("css-examples/box-alignment/flexbox/auto-margins.html", '100%', 500)}}
 
@@ -86,8 +86,3 @@ On the cross axis the `row-gap` property creates spacing between adjacent flex l
 ## Guides
 
 - [Alignment in flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)
-
-## External Resources
-
-- [CSS Grid, Flexbox and Box Alignment](https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/)
-- [Thoughts on partial implementations of Box Alignment](https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/)