Skip to content

Commit 6507fce

Browse files
authored
Fix typos (#37539) (#37671)
1 parent c5806a7 commit 6507fce

File tree

1 file changed

+3
-3
lines changed
  • files/en-us/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container

1 file changed

+3
-3
lines changed

files/en-us/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,7 @@ You can try this out in the example below, which has a flex container with `flex
190190

191191
## Aligning content on the cross axis with the `align-content` property
192192

193-
So far, we have focused on aligning items or an individual items inside the area defined by a {{glossary("flex_container")}} containing a single line of flex items. When flex items are allowed to wrap across multiple lines, the {{cssxref("align-content")}} property can be used to control the distribution of space between the lines, also known as **packing flex lines**.
193+
So far, we have focused on aligning items or individual items inside the area defined by a {{glossary("flex container")}} containing a single line of flex items. When flex items are allowed to wrap across multiple lines, the {{cssxref("align-content")}} property can be used to control the distribution of space between the lines, also known as **packing flex lines**.
194194

195195
For `align-content` to have an effect, the cross axis dimension (the height in this case) of the flex container must be greater than needed to display the items. It then works on all the items as a set. The `align-content` values dictate what happens with the extra available space and the alignment of the entire set of items within it.
196196

@@ -307,7 +307,7 @@ In our initial example with `display: flex` on the container, the items display
307307

308308
![Three items, each 100 pixels wide in a 500 pixel container. The available space is at the end of the items.](align6.png)
309309

310-
The `baseline` values aren't relevant in this dimension. Otherwise, `justify-content` property accepts the same values as `align-content`.
310+
The `baseline` values aren't relevant in this dimension. Otherwise, the `justify-content` property accepts the same values as `align-content`.
311311

312312
- `justify-content: flex-start`
313313
- `justify-content: flex-end`
@@ -514,7 +514,7 @@ In this live example, the flex items are arranged in a row with the basic flex v
514514
To create a gap between flex items, use the {{cssxref("gap")}}, {{cssxref("column-gap")}}, and {{cssxref("row-gap")}} properties. The {{cssxref("column-gap")}} property creates gaps between items in a row. The {{cssxref("row-gap")}} property creates gaps between flex lines when you have {{cssxref("flex-wrap")}} set to `wrap`.
515515

516516
The {{cssxref("gap")}} property is a shorthand that sets both `row-gap` and `column-gap`.
517-
The gap between flex items or between flex line depends on the direction. If the {{cssxref("flex-direction")}} property creates rows, the first value defines the gap between flex lines, and the second value defines the gap between items within each line. With columns (when `flex-direction` is set to `column` or `column-reverse`), the first value defines the gap between flex items, and the second value defines the gaps between flex lines.
517+
The gaps between flex items or flex lines depend on the direction. If the {{cssxref("flex-direction")}} property creates rows, the first value defines the gap between flex lines, and the second value defines the gap between items within each line. With columns (when `flex-direction` is set to `column` or `column-reverse`), the first value defines the gap between flex items, and the second value defines the gaps between flex lines.
518518

519519
```html live-sample___gap
520520
<div class="box">

0 commit comments

Comments
 (0)