You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: files/en-us/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md
+3-3
Original file line number
Diff line number
Diff line change
@@ -190,7 +190,7 @@ You can try this out in the example below, which has a flex container with `flex
190
190
191
191
## Aligning content on the cross axis with the `align-content` property
192
192
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**.
194
194
195
195
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.
196
196
@@ -307,7 +307,7 @@ In our initial example with `display: flex` on the container, the items display
307
307
308
308

309
309
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`.
311
311
312
312
-`justify-content: flex-start`
313
313
-`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
514
514
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`.
515
515
516
516
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.
0 commit comments