Add `space-evenly` option for `justify-content` (#30910)

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index aa6c6eade68a24c0fee944a489d331ee3051bfa4..73ba08c97509bf55bc77df47559e02d43a7c68b0 100644 (file)
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -177,6 +177,7 @@ $utilities: map-merge(
         center: center,
         between: space-between,
         around: space-around,
+        evenly: space-evenly,
       )
     ),
     "align-items": (

diff --git a/site/content/docs/5.0/layout/columns.md b/site/content/docs/5.0/layout/columns.md
index 98f247b935ef305d1ab170ded7a6a39e4f458d51..b7c6c9cae808dd94372ce53be15b1cc20410d382 100644 (file)
--- a/site/content/docs/5.0/layout/columns.md
+++ b/site/content/docs/5.0/layout/columns.md
@@ -122,6 +122,14 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
       One of two columns
     </div>
   </div>
+  <div class="row justify-content-evenly">
+    <div class="col-4">
+      One of two columns
+    </div>
+    <div class="col-4">
+      One of two columns
+    </div>
+  </div>
 </div>
 {{< /example >}}
 

diff --git a/site/content/docs/5.0/utilities/flex.md b/site/content/docs/5.0/utilities/flex.md
index 1172d517694b5cbc87a95435d75ccd984df7d51a..c4806ac6a0a02d9f0c5c072a3e62827dbbce1327 100644 (file)
--- a/site/content/docs/5.0/utilities/flex.md
+++ b/site/content/docs/5.0/utilities/flex.md
@@ -78,7 +78,7 @@ Responsive variations also exist for `flex-direction`.
 
 ## 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`.
+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`, `around`, or `evenly`.
 
 <div class="bd-example">
   <div class="d-flex justify-content-start bd-highlight mb-3">
@@ -106,6 +106,11 @@ Use `justify-content` utilities on flexbox containers to change the alignment of
     <div class="p-2 bd-highlight">Flex item</div>
     <div class="p-2 bd-highlight">Flex item</div>
   </div>
+  <div class="d-flex justify-content-evenly bd-highlight">
+    <div class="p-2 bd-highlight">Flex item</div>
+    <div class="p-2 bd-highlight">Flex item</div>
+    <div class="p-2 bd-highlight">Flex item</div>
+  </div>
 </div>
 
 {{< highlight html >}}
@@ -114,6 +119,7 @@ Use `justify-content` utilities on flexbox containers to change the alignment of
 <div class="d-flex justify-content-center">...</div>
 <div class="d-flex justify-content-between">...</div>
 <div class="d-flex justify-content-around">...</div>
+<div class="d-flex justify-content-evenly">...</div>
 {{< /highlight >}}
 
 Responsive variations also exist for `justify-content`.
@@ -126,6 +132,7 @@ Responsive variations also exist for `justify-content`.
 - `.justify-content{{ .abbr }}-center`
 - `.justify-content{{ .abbr }}-between`
 - `.justify-content{{ .abbr }}-around`
+- `.justify-content{{ .abbr }}-evenly`
 {{- end -}}
 {{< /flex.inline >}}
 {{< /markdown >}}