kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

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

This commit is contained in:
Edson Jr 2020-05-30 10:19:10 -03:00 committed by GitHub
parent 407b4c3606
commit 1f1b147f19
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
scss/_utilities.scss
View File

@ -177,6 +177,7 @@ $utilities: map-merge(
center: center,
between: space-between,
around: space-around,
evenly: space-evenly,
)
),
"align-items": (

8
site/content/docs/5.0/layout/columns.md
View File

@ -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 >}}

9
site/content/docs/5.0/utilities/flex.md
View File

@ -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 >}}