diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md index 2acd1fed49..bc2a9cdb0e 100644 --- a/docs/utilities/flexbox.md +++ b/docs/utilities/flexbox.md @@ -108,3 +108,68 @@ Responsive variations also exist for `.flex-nowrap` and `.flex-wrap`. {% for bp in site.data.breakpoints %} - `.flex{{ bp.abbr }}-nowrap` - `.flex{{ bp.abbr }}-wrap`{% endfor %} + +## Justify content + +Use `justify-content` utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if `flex-direction: column`). Choose from `start` (browser default), `end`, `center`, `between`, or `around`. + +{% example html %} +
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+{% endexample %} + + +## Align items + +Use `align-items` utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from `start` (browser default), `end`, `center`, `baseline`, or `stretch`. + +{% example html %} +
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+{% endexample %}