diff --git a/packages/docs/src/pages/en/features/sass-variables.md b/packages/docs/src/pages/en/features/sass-variables.md index 8a0d1ec80ec..ed287ab6078 100644 --- a/packages/docs/src/pages/en/features/sass-variables.md +++ b/packages/docs/src/pages/en/features/sass-variables.md @@ -163,6 +163,7 @@ Utility classes are a powerful feature of Vuetify, but they can also be unnecess "height-screen": false, "height": false, "justify-content": false, + "justify-items": false, "left": false, "margin-bottom": false, "margin-end": false, diff --git a/packages/docs/src/pages/en/styles/flex.md b/packages/docs/src/pages/en/styles/flex.md index d7671036b62..9cb3eabc366 100644 --- a/packages/docs/src/pages/en/styles/flex.md +++ b/packages/docs/src/pages/en/styles/flex.md @@ -229,6 +229,26 @@ Control the layout of flex containers with alignment, justification and more wit | **justify-xl-space-between** | justify-content: space-between; | | **justify-xl-space-around** | justify-content: space-around; | | **justify-xl-space-evenly** | justify-content: space-evenly; | +| **justify-items-start** | justify-items: start; | +| **justify-items-end** | justify-items: end; | +| **justify-items-center** | justify-items: center; | +| **justify-items-stretch** | justify-items: stretch; | +| **justify-items-sm-start** | justify-items: start; | +| **justify-items-sm-end** | justify-items: end; | +| **justify-items-sm-center** | justify-items: center; | +| **justify-items-sm-stretch** | justify-items: stretch; | +| **justify-items-md-start** | justify-items: start; | +| **justify-items-md-end** | justify-items: end; | +| **justify-items-md-center** | justify-items: center; | +| **justify-items-md-stretch** | justify-items: stretch; | +| **justify-items-lg-start** | justify-items: start; | +| **justify-items-lg-end** | justify-items: end; | +| **justify-items-lg-center** | justify-items: center; | +| **justify-items-lg-stretch** | justify-items: stretch; | +| **justify-items-xl-start** | justify-items: start; | +| **justify-items-xl-end** | justify-items: end; | +| **justify-items-xl-center** | justify-items: center; | +| **justify-items-xl-stretch** | justify-items: stretch; | | **align-start** | align-items: flex-start; | | **align-end** | align-items: flex-end; | | **align-center** | align-items: center; | diff --git a/packages/vuetify/src/styles/settings/_utilities.scss b/packages/vuetify/src/styles/settings/_utilities.scss index d6d600a93a5..f55c3234855 100644 --- a/packages/vuetify/src/styles/settings/_utilities.scss +++ b/packages/vuetify/src/styles/settings/_utilities.scss @@ -117,6 +117,16 @@ $utilities: () !default; space-evenly: space-evenly, ) ), + "justify-items": ( + responsive: true, + property: justify-items, + values: ( + start: flex-start, + end: flex-end, + center: center, + stretch: stretch, + ) + ), "align-items": ( responsive: true, property: align-items,