# Flex Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. **Category:** Utilities **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-flex--introduction ## Variants documented in Storybook - FlexShowcase: https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-flex--flexshowcase ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Flex. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Flex Showcase — Flex Display HTML: ```html

item 1

item 2

item 3

``` React: ```jsx import React from 'react'; const FlexExample1Demo = () => ( <>

item 1

item 2

item 3

); export default FlexExample1Demo; ``` Angular: ```html

item 1

item 2

item 3

``` ### 2. Flex Showcase — Flex Direction HTML: ```html

Row (ux4g-flex-row)

item 1

item 2

item 3

Row Reverse (ux4g-flex-row-reverse)

item 1

item 2

item 3

Column (ux4g-flex-col)

item 1

item 2

Column Reverse (ux4g-flex-col-reverse)

item 1

item 2

``` React: ```jsx import React from 'react'; const FlexExample2Demo = () => ( <>

{/* Row */}

Row (ux4g-flex-row)

item 1

item 2

item 3

{/* Row Reverse */}

Row Reverse (ux4g-flex-row-reverse)

item 1

item 2

item 3

{/* Column */}

Column (ux4g-flex-col)

item 1

item 2

{/* Column Reverse */}

Column Reverse (ux4g-flex-col-reverse)

item 1

item 2

); export default FlexExample2Demo; ``` Angular: ```html

Row (ux4g-flex-row)

item 1

item 2

item 3

Row Reverse (ux4g-flex-row-reverse)

item 1

item 2

item 3

Column (ux4g-flex-col)

item 1

item 2

Column Reverse (ux4g-flex-col-reverse)

item 1

item 2

``` ### 3. Flex Showcase — Justify Content HTML: ```html

Justify Content Start

Justify

Content

Start

Justify Content End

Justify

Content

End

Justify Content Center

Justify

Content

Center

Justify Content Between

Justify

Content

Between

Justify Content Around

Justify

Content

Around

Justify Content Evenly

Justify

Content

Evenly

``` React: ```jsx import React from 'react'; const FlexExample3Demo = () => ( <>

{/* Start */}

Justify Content Start

Justify

Content

Start

{/* End */}

Justify Content End

Justify

Content

End

{/* Center */}

Justify Content Center

Justify

Content

Center

{/* Between */}

Justify Content Between

Justify

Content

Between

{/* Around */}

Justify Content Around

Justify

Content

Around

{/* Evenly */}

Justify Content Evenly

Justify

Content

Evenly

); export default FlexExample3Demo; ``` Angular: ```html

Justify Content Start

Justify

Content

Start

Justify Content End

Justify

Content

End

Justify Content Center

Justify

Content

Center

Justify Content Between

Justify

Content

Between

Justify Content Around

Justify

Content

Around

Justify Content Evenly

Justify

Content

Evenly

``` ### 4. Flex Showcase — Align Items HTML: ```html

Align Items Start

Flex Item

Align Items End

Flex Item

Align Items Center

Flex Item

Align Items Baseline

Flex Item

Align Items Stretch

Flex Item

``` React: ```jsx import React from 'react'; const FlexExample4Demo = () => ( <>

{/* Start */}

Align Items Start

Flex Item

{/* End */}

Align Items End

Flex Item

{/* Center */}

Align Items Center

Flex Item

{/* Baseline */}

Align Items Baseline

Flex Item

{/* Stretch */}

Align Items Stretch

Flex Item

); export default FlexExample4Demo; ``` Angular: ```html

Align Items Start

Flex Item

Align Items End

Flex Item

Align Items Center

Flex Item

Align Items Baseline

Flex Item

Align Items Stretch

Flex Item

``` ### 5. Flex Showcase — Align Self HTML: ```html

Align Self Start

Flex Item

Align Self Start

Flex Item

Align Self End

Flex Item

Align Self End

Flex Item

Align Self Center

Flex Item

Align Self Center

Flex Item

Align Self Baseline

Flex Item

Align Self Baseline

Flex Item

Align Self Stretch

Flex Item

Align Self Stretch

Flex Item

``` React: ```jsx import React from 'react'; const FlexExample5Demo = () => ( <>

{/* Start */}

Align Self Start

Flex Item

Align Self Start

Flex Item

{/* End */}

Align Self End

Flex Item

Align Self End

Flex Item

{/* Center */}

Align Self Center

Flex Item

Align Self Center

Flex Item

{/* Baseline */}

Align Self Baseline

Flex Item

Align Self Baseline

Flex Item

{/* Stretch */}

Align Self Stretch

Flex Item

Align Self Stretch

Flex Item

); export default FlexExample5Demo; ``` Angular: ```html

Align Self Start

Flex Item

Align Self Start

Flex Item

Align Self End

Flex Item

Align Self End

Flex Item

Align Self Center

Flex Item

Align Self Center

Flex Item

Align Self Baseline

Flex Item

Align Self Baseline

Flex Item

Align Self Stretch

Flex Item

Align Self Stretch

Flex Item

``` ### 6. Flex Showcase — Flex Wrap HTML: ```html

No Wrap

item 1

item 2

item 3

Wrap

item 1

item 2

item 3

Wrap Reverse

item 1

item 2

item 3

``` React: ```jsx import React from 'react'; const FlexExample6Demo = () => ( <>

{/* No Wrap */}

No Wrap

item 1

item 2

item 3

{/* Wrap */}

Wrap

item 1

item 2

item 3

{/* Wrap Reverse */}

Wrap Reverse

item 1

item 2

item 3

); export default FlexExample6Demo; ``` Angular: ```html

No Wrap

item 1

item 2

item 3

Wrap

item 1

item 2

item 3

Wrap Reverse

item 1

item 2

item 3

``` ### 7. Flex Showcase — Responsive Flex Direction HTML: ```html

Mobile: Col

Desktop: Row

Column on mobile, Row on MD+ screens.

``` React: ```jsx import React from 'react'; const FlexExample7Demo = () => ( <>

Mobile: Col

Desktop: Row

Column on mobile, Row on MD+ screens.

); export default FlexExample7Demo; ``` Angular: ```html

Mobile: Col

Desktop: Row

Column on mobile, Row on MD+ screens.

``` ### 8. Flex Showcase — Flex Sizing & Shorthands HTML: ```html

Flex Fill )

filled

Grow & Shrink

grows to fill

flat

Flex Ratios

ratio 2

ratio 1

Flex Control

auto size

none (100px)

``` React: ```jsx import React from 'react'; const FlexExample8Demo = () => ( <>

{/* Flex Fill */}

Flex Fill )

filled

{/* Flex Grow / Shrink */}

Grow & Shrink

grows to fill

flat

{/* Flex Ratios */}

Flex Ratios

ratio 2

ratio 1

{/* Flex Auto/None */}

Flex Control

auto size

none (100px)

); export default FlexExample8Demo; ``` Angular: ```html

Flex Fill )

filled

Grow & Shrink

grows to fill

flat

Flex Ratios

ratio 2

ratio 1

Flex Control

auto size

none (100px)

``` ### 9. Flex Showcase — Align Content HTML: ```html

Align Content Start

item

Align Content Center

item

``` React: ```jsx import React from 'react'; const FlexExample9Demo = () => ( <>

{/* Start */}

Align Content Start

item

{/* Center */}

Align Content Center

item

); export default FlexExample9Demo; ``` Angular: ```html

Align Content Start

item

Align Content Center

item

``` ### 10. Flex Showcase — Flex Visual Ordering HTML: ```html

First & Last Order

1 (Last)

2 (Middle)

3 (First)

``` React: ```jsx import React from 'react'; const FlexExample10Demo = () => ( <>

{/* Order First/Last */}

First & Last Order

1 (Last)

2 (Middle)

3 (First)

); export default FlexExample10Demo; ``` Angular: ```html

First & Last Order

1 (Last)

2 (Middle)

3 (First)

``` ### 11. Introduction — Introduction HTML: ```html

Utilities

Flex Utilities Reference

A complete reference of all flexbox utility classes, including every responsive variant.

Comprehensive CSS Class Reference

Every class from the utility library, categorized for easy access.

Flex Direction

Format: ux4g-flex-{direction/wrap}

Flex Row ux4g-flex-row

Flex Col ux4g-flex-col

Flex Column ux4g-flex-column

Flex Row Reverse ux4g-flex-row-reverse

Flex Col Reverse ux4g-flex-col-reverse

Flex Column Reverse ux4g-flex-column-reverse

Sm Flex Row ux4g-sm-flex-row

Sm Flex Col ux4g-sm-flex-col

Sm Flex Column ux4g-sm-flex-column

Sm Flex Row Reverse ux4g-sm-flex-row-reverse

Sm Flex Col Reverse ux4g-sm-flex-col-reverse

Sm Flex Column Reverse ux4g-sm-flex-column-reverse

Md Flex Row ux4g-md-flex-row

Md Flex Col ux4g-md-flex-col

Md Flex Column ux4g-md-flex-column

Md Flex Row Reverse ux4g-md-flex-row-reverse

Md Flex Col Reverse ux4g-md-flex-col-reverse

Md Flex Column Reverse ux4g-md-flex-column-reverse

Lg Flex Row ux4g-lg-flex-row

Lg Flex Col ux4g-lg-flex-col

Lg Flex Column ux4g-lg-flex-column

Lg Flex Row Reverse ux4g-lg-flex-row-reverse

Lg Flex Col Reverse ux4g-lg-flex-col-reverse

Lg Flex Column Reverse ux4g-lg-flex-column-reverse

Xl Flex Row ux4g-xl-flex-row

Xl Flex Col ux4g-xl-flex-col

Xl Flex Column ux4g-xl-flex-column

Xl Flex Row Reverse ux4g-xl-flex-row-reverse

Xl Flex Col Reverse ux4g-xl-flex-col-reverse

Xl Flex Column Reverse ux4g-xl-flex-column-reverse

2xl Flex Row ux4g-2xl-flex-row

2xl Flex Col ux4g-2xl-flex-col

2xl Flex Column ux4g-2xl-flex-column

2xl Flex Row Reverse ux4g-2xl-flex-row-reverse

2xl Flex Col Reverse ux4g-2xl-flex-col-reverse

2xl Flex Column Reverse ux4g-2xl-flex-column-reverse

Justify Content

Format: ux4g-flex-{direction/wrap}

Jc Start ux4g-jc-start

Jc End ux4g-jc-end

Jc Center ux4g-jc-center

Jc Between ux4g-jc-between

Jc Around ux4g-jc-around

Jc Evenly ux4g-jc-evenly

Sm Jc Start ux4g-sm-jc-start

Sm Jc End ux4g-sm-jc-end

Sm Jc Center ux4g-sm-jc-center

Sm Jc Between ux4g-sm-jc-between

Sm Jc Around ux4g-sm-jc-around

Sm Jc Evenly ux4g-sm-jc-evenly

Md Jc Start ux4g-md-jc-start

Md Jc End ux4g-md-jc-end

Md Jc Center ux4g-md-jc-center

Md Jc Between ux4g-md-jc-between

Md Jc Around ux4g-md-jc-around

Md Jc Evenly ux4g-md-jc-evenly

Lg Jc Start ux4g-lg-jc-start

Lg Jc End ux4g-lg-jc-end

Lg Jc Center ux4g-lg-jc-center

Lg Jc Between ux4g-lg-jc-between

Lg Jc Around ux4g-lg-jc-around

Lg Jc Evenly ux4g-lg-jc-evenly

Xl Jc Start ux4g-xl-jc-start

Xl Jc End ux4g-xl-jc-end

Xl Jc Center ux4g-xl-jc-center

Xl Jc Between ux4g-xl-jc-between

Xl Jc Around ux4g-xl-jc-around

Xl Jc Evenly ux4g-xl-jc-evenly

2xl Jc Start ux4g-2xl-jc-start

2xl Jc End ux4g-2xl-jc-end

2xl Jc Center ux4g-2xl-jc-center

2xl Jc Between ux4g-2xl-jc-between

2xl Jc Around ux4g-2xl-jc-around

2xl Jc Evenly ux4g-2xl-jc-evenly

Align Items

Format: ux4g-flex-{direction/wrap}

Ai Start ux4g-ai-start

Ai Center ux4g-ai-center

Ai End ux4g-ai-end

Ai Stretch ux4g-ai-stretch

Ai Baseline ux4g-ai-baseline

Sm Ai Start ux4g-sm-ai-start

Sm Ai Center ux4g-sm-ai-center

Sm Ai End ux4g-sm-ai-end

Sm Ai Stretch ux4g-sm-ai-stretch

Sm Ai Baseline ux4g-sm-ai-baseline

Md Ai Start ux4g-md-ai-start

Md Ai Center ux4g-md-ai-center

Md Ai End ux4g-md-ai-end

Md Ai Stretch ux4g-md-ai-stretch

Md Ai Baseline ux4g-md-ai-baseline

Lg Ai Start ux4g-lg-ai-start

Lg Ai Center ux4g-lg-ai-center

Lg Ai End ux4g-lg-ai-end

Lg Ai Stretch ux4g-lg-ai-stretch

Lg Ai Baseline ux4g-lg-ai-baseline

Xl Ai Start ux4g-xl-ai-start

Xl Ai Center ux4g-xl-ai-center

Xl Ai End ux4g-xl-ai-end

Xl Ai Stretch ux4g-xl-ai-stretch

Xl Ai Baseline ux4g-xl-ai-baseline

2xl Ai Start ux4g-2xl-ai-start

2xl Ai Center ux4g-2xl-ai-center

2xl Ai End ux4g-2xl-ai-end

2xl Ai Stretch ux4g-2xl-ai-stretch

2xl Ai Baseline ux4g-2xl-ai-baseline

Align Self

Format: ux4g-flex-{direction/wrap}

As Start ux4g-as-start

As End ux4g-as-end

As Center ux4g-as-center

As Baseline ux4g-as-baseline

As Stretch ux4g-as-stretch

Sm As Start ux4g-sm-as-start

Sm As End ux4g-sm-as-end

Sm As Center ux4g-sm-as-center

Sm As Baseline ux4g-sm-as-baseline

Sm As Stretch ux4g-sm-as-stretch

Md As Start ux4g-md-as-start

Md As End ux4g-md-as-end

Md As Center ux4g-md-as-center

Md As Baseline ux4g-md-as-baseline

Md As Stretch ux4g-md-as-stretch

Lg As Start ux4g-lg-as-start

Lg As End ux4g-lg-as-end

Lg As Center ux4g-lg-as-center

Lg As Baseline ux4g-lg-as-baseline

Lg As Stretch ux4g-lg-as-stretch

Xl As Start ux4g-xl-as-start

Xl As End ux4g-xl-as-end

Xl As Center ux4g-xl-as-center

Xl As Baseline ux4g-xl-as-baseline

Xl As Stretch ux4g-xl-as-stretch

2xl As Start ux4g-2xl-as-start

2xl As End ux4g-2xl-as-end

2xl As Center ux4g-2xl-as-center

2xl As Baseline ux4g-2xl-as-baseline

2xl As Stretch ux4g-2xl-as-stretch

Align Content

Format: ux4g-flex-{direction/wrap}

Ac Start ux4g-ac-start

Ac End ux4g-ac-end

Ac Center ux4g-ac-center

Ac Between ux4g-ac-between

Ac Around ux4g-ac-around

Ac Stretch ux4g-ac-stretch

Sm Ac Start ux4g-sm-ac-start

Sm Ac End ux4g-sm-ac-end

Sm Ac Center ux4g-sm-ac-center

Sm Ac Between ux4g-sm-ac-between

Sm Ac Around ux4g-sm-ac-around

Sm Ac Stretch ux4g-sm-ac-stretch

Md Ac Start ux4g-md-ac-start

Md Ac End ux4g-md-ac-end

Md Ac Center ux4g-md-ac-center

Md Ac Between ux4g-md-ac-between

Md Ac Around ux4g-md-ac-around

Md Ac Stretch ux4g-md-ac-stretch

Lg Ac Start ux4g-lg-ac-start

Lg Ac End ux4g-lg-ac-end

Lg Ac Center ux4g-lg-ac-center

Lg Ac Between ux4g-lg-ac-between

Lg Ac Around ux4g-lg-ac-around

Lg Ac Stretch ux4g-lg-ac-stretch

Xl Ac Start ux4g-xl-ac-start

Xl Ac End ux4g-xl-ac-end

Xl Ac Center ux4g-xl-ac-center

Xl Ac Between ux4g-xl-ac-between

Xl Ac Around ux4g-xl-ac-around

Xl Ac Stretch ux4g-xl-ac-stretch

2xl Ac Start ux4g-2xl-ac-start

2xl Ac End ux4g-2xl-ac-end

2xl Ac Center ux4g-2xl-ac-center

2xl Ac Between ux4g-2xl-ac-between

2xl Ac Around ux4g-2xl-ac-around

2xl Ac Stretch ux4g-2xl-ac-stretch

Justify Items

Format: ux4g-flex-{direction/wrap}

Ji Start ux4g-ji-start

Ji End ux4g-ji-end

Ji Center ux4g-ji-center

Ji Stretch ux4g-ji-stretch

Ji Normal ux4g-ji-normal

Ji Center Safe ux4g-ji-center-safe

Ji End Safe ux4g-ji-end-safe

Sm Ji Start ux4g-sm-ji-start

Sm Ji End ux4g-sm-ji-end

Sm Ji Center ux4g-sm-ji-center

Sm Ji Stretch ux4g-sm-ji-stretch

Sm Ji Normal ux4g-sm-ji-normal

Sm Ji Center Safe ux4g-sm-ji-center-safe

Sm Ji End Safe ux4g-sm-ji-end-safe

Md Ji Start ux4g-md-ji-start

Md Ji End ux4g-md-ji-end

Md Ji Center ux4g-md-ji-center

Md Ji Stretch ux4g-md-ji-stretch

Md Ji Normal ux4g-md-ji-normal

Md Ji Center Safe ux4g-md-ji-center-safe

Md Ji End Safe ux4g-md-ji-end-safe

Lg Ji Start ux4g-lg-ji-start

Lg Ji End ux4g-lg-ji-end

Lg Ji Center ux4g-lg-ji-center

Lg Ji Stretch ux4g-lg-ji-stretch

Lg Ji Normal ux4g-lg-ji-normal

Lg Ji Center Safe ux4g-lg-ji-center-safe

Lg Ji End Safe ux4g-lg-ji-end-safe

Xl Ji Start ux4g-xl-ji-start

Xl Ji End ux4g-xl-ji-end

Xl Ji Center ux4g-xl-ji-center

Xl Ji Stretch ux4g-xl-ji-stretch

Xl Ji Normal ux4g-xl-ji-normal

Xl Ji Center Safe ux4g-xl-ji-center-safe

Xl Ji End Safe ux4g-xl-ji-end-safe

2xl Ji Start ux4g-2xl-ji-start

2xl Ji End ux4g-2xl-ji-end

2xl Ji Center ux4g-2xl-ji-center

2xl Ji Stretch ux4g-2xl-ji-stretch

2xl Ji Normal ux4g-2xl-ji-normal

2xl Ji Center Safe ux4g-2xl-ji-center-safe

2xl Ji End Safe ux4g-2xl-ji-end-safe

Justify Self

Format: ux4g-flex-{direction/wrap}

Js Auto ux4g-js-auto

Js Start ux4g-js-start

Js End ux4g-js-end

Js Center ux4g-js-center

Js Stretch ux4g-js-stretch

Js Center Safe ux4g-js-center-safe

Js End Safe ux4g-js-end-safe

Sm Js Auto ux4g-sm-js-auto

Sm Js Start ux4g-sm-js-start

Sm Js End ux4g-sm-js-end

Sm Js Center ux4g-sm-js-center

Sm Js Stretch ux4g-sm-js-stretch

Sm Js Center Safe ux4g-sm-js-center-safe

Sm Js End Safe ux4g-sm-js-end-safe

Md Js Auto ux4g-md-js-auto

Md Js Start ux4g-md-js-start

Md Js End ux4g-md-js-end

Md Js Center ux4g-md-js-center

Md Js Stretch ux4g-md-js-stretch

Md Js Center Safe ux4g-md-js-center-safe

Md Js End Safe ux4g-md-js-end-safe

Lg Js Auto ux4g-lg-js-auto

Lg Js Start ux4g-lg-js-start

Lg Js End ux4g-lg-js-end

Lg Js Center ux4g-lg-js-center

Lg Js Stretch ux4g-lg-js-stretch

Lg Js Center Safe ux4g-lg-js-center-safe

Lg Js End Safe ux4g-lg-js-end-safe

Xl Js Auto ux4g-xl-js-auto

Xl Js Start ux4g-xl-js-start

Xl Js End ux4g-xl-js-end

Xl Js Center ux4g-xl-js-center

Xl Js Stretch ux4g-xl-js-stretch

Xl Js Center Safe ux4g-xl-js-center-safe

Xl Js End Safe ux4g-xl-js-end-safe

2xl Js Auto ux4g-2xl-js-auto

2xl Js Start ux4g-2xl-js-start

2xl Js End ux4g-2xl-js-end

2xl Js Center ux4g-2xl-js-center

2xl Js Stretch ux4g-2xl-js-stretch

2xl Js Center Safe ux4g-2xl-js-center-safe

2xl Js End Safe ux4g-2xl-js-end-safe

Visual Order

Format: ux4g-flex-{direction/wrap}

Order First ux4g-order-first

Order Last ux4g-order-last

Order 0 ux4g-order-0

Order 1 ux4g-order-1

Order 2 ux4g-order-2

Order 3 ux4g-order-3

Order 4 ux4g-order-4

Order 5 ux4g-order-5

Sm Order First ux4g-sm-order-first

Sm Order Last ux4g-sm-order-last

Sm Order 0 ux4g-sm-order-0

Sm Order 1 ux4g-sm-order-1

Sm Order 2 ux4g-sm-order-2

Sm Order 3 ux4g-sm-order-3

Sm Order 4 ux4g-sm-order-4

Sm Order 5 ux4g-sm-order-5

Md Order First ux4g-md-order-first

Md Order Last ux4g-md-order-last

Md Order 0 ux4g-md-order-0

Md Order 1 ux4g-md-order-1

Md Order 2 ux4g-md-order-2

Md Order 3 ux4g-md-order-3

Md Order 4 ux4g-md-order-4

Md Order 5 ux4g-md-order-5

Lg Order First ux4g-lg-order-first

Lg Order Last ux4g-lg-order-last

Lg Order 0 ux4g-lg-order-0

Lg Order 1 ux4g-lg-order-1

Lg Order 2 ux4g-lg-order-2

Lg Order 3 ux4g-lg-order-3

Lg Order 4 ux4g-lg-order-4

Lg Order 5 ux4g-lg-order-5

Xl Order First ux4g-xl-order-first

Xl Order Last ux4g-xl-order-last

Xl Order 0 ux4g-xl-order-0

Xl Order 1 ux4g-xl-order-1

Xl Order 2 ux4g-xl-order-2

Xl Order 3 ux4g-xl-order-3

Xl Order 4 ux4g-xl-order-4

Xl Order 5 ux4g-xl-order-5

2xl Order First ux4g-2xl-order-first

2xl Order Last ux4g-2xl-order-last

2xl Order 0 ux4g-2xl-order-0

2xl Order 1 ux4g-2xl-order-1

2xl Order 2 ux4g-2xl-order-2

2xl Order 3 ux4g-2xl-order-3

2xl Order 4 ux4g-2xl-order-4

2xl Order 5 ux4g-2xl-order-5

Wrap, Fill & Grow

Format: ux4g-flex-{direction/wrap}

Wrap ux4g-wrap

Nowrap ux4g-nowrap

Wrap Reverse ux4g-wrap-reverse

Flex Fill ux4g-flex-fill

Grow ux4g-grow

Grow 0 ux4g-grow-0

Shrink ux4g-shrink

Shrink 0 ux4g-shrink-0

Sm Wrap ux4g-sm-wrap

Sm Nowrap ux4g-sm-nowrap

Sm Wrap Reverse ux4g-sm-wrap-reverse

Sm Flex Fill ux4g-sm-flex-fill

Sm Grow ux4g-sm-grow

Sm Grow 0 ux4g-sm-grow-0

Sm Shrink ux4g-sm-shrink

Sm Shrink 0 ux4g-sm-shrink-0

Md Wrap ux4g-md-wrap

Md Nowrap ux4g-md-nowrap

Md Wrap Reverse ux4g-md-wrap-reverse

Md Flex Fill ux4g-md-flex-fill

Md Grow ux4g-md-grow

Md Grow 0 ux4g-md-grow-0

Md Shrink ux4g-md-shrink

Md Shrink 0 ux4g-md-shrink-0

Lg Wrap ux4g-lg-wrap

Lg Nowrap ux4g-lg-nowrap

Lg Wrap Reverse ux4g-lg-wrap-reverse

Lg Flex Fill ux4g-lg-flex-fill

Lg Grow ux4g-lg-grow

Lg Grow 0 ux4g-lg-grow-0

Lg Shrink ux4g-lg-shrink

Lg Shrink 0 ux4g-lg-shrink-0

Xl Wrap ux4g-xl-wrap

Xl Nowrap ux4g-xl-nowrap

Xl Wrap Reverse ux4g-xl-wrap-reverse

Xl Flex Fill ux4g-xl-flex-fill

Xl Grow ux4g-xl-grow

Xl Grow 0 ux4g-xl-grow-0

Xl Shrink ux4g-xl-shrink

Xl Shrink 0 ux4g-xl-shrink-0

2xl Wrap ux4g-2xl-wrap

2xl Nowrap ux4g-2xl-nowrap

2xl Wrap Reverse ux4g-2xl-wrap-reverse

2xl Flex Fill ux4g-2xl-flex-fill

2xl Grow ux4g-2xl-grow

2xl Grow 0 ux4g-2xl-grow-0

2xl Shrink ux4g-2xl-shrink

2xl Shrink 0 ux4g-2xl-shrink-0

Flex Shorthands

Format: ux4g-flex-{direction/wrap}

Flex 1 ux4g-flex-1

Flex 2 ux4g-flex-2

Flex 3 ux4g-flex-3

Flex Auto ux4g-flex-auto

Flex None ux4g-flex-none

Display Flex ux4g-d-flex

Display Inline Flex ux4g-d-inline-flex

``` React: ```jsx import React from 'react'; const FlexExample11Demo = () => ( <>

Utilities

Flex Utilities Reference

A complete reference of all flexbox utility classes, including every responsive variant.

Comprehensive CSS Class Reference

Every class from the utility library, categorized for easy access.

{/* Flex Direction */}

Flex Direction

Format: ux4g-flex-{direction/wrap}

Flex Row ux4g-flex-row

Flex Col ux4g-flex-col

Flex Column ux4g-flex-column

Flex Row Reverse ux4g-flex-row-reverse

Flex Col Reverse ux4g-flex-col-reverse

Flex Column Reverse ux4g-flex-column-reverse

Sm Flex Row ux4g-sm-flex-row

Sm Flex Col ux4g-sm-flex-col

Sm Flex Column ux4g-sm-flex-column

Sm Flex Row Reverse ux4g-sm-flex-row-reverse

Sm Flex Col Reverse ux4g-sm-flex-col-reverse

Sm Flex Column Reverse ux4g-sm-flex-column-reverse

Md Flex Row ux4g-md-flex-row

Md Flex Col ux4g-md-flex-col

Md Flex Column ux4g-md-flex-column

Md Flex Row Reverse ux4g-md-flex-row-reverse

Md Flex Col Reverse ux4g-md-flex-col-reverse

Md Flex Column Reverse ux4g-md-flex-column-reverse

Lg Flex Row ux4g-lg-flex-row

Lg Flex Col ux4g-lg-flex-col

Lg Flex Column ux4g-lg-flex-column

Lg Flex Row Reverse ux4g-lg-flex-row-reverse

Lg Flex Col Reverse ux4g-lg-flex-col-reverse

Lg Flex Column Reverse ux4g-lg-flex-column-reverse

Xl Flex Row ux4g-xl-flex-row

Xl Flex Col ux4g-xl-flex-col

Xl Flex Column ux4g-xl-flex-column

Xl Flex Row Reverse ux4g-xl-flex-row-reverse

Xl Flex Col Reverse ux4g-xl-flex-col-reverse

Xl Flex Column Reverse ux4g-xl-flex-column-reverse

2xl Flex Row ux4g-2xl-flex-row

2xl Flex Col ux4g-2xl-flex-col

2xl Flex Column ux4g-2xl-flex-column

2xl Flex Row Reverse ux4g-2xl-flex-row-reverse

2xl Flex Col Reverse ux4g-2xl-flex-col-reverse

2xl Flex Column Reverse ux4g-2xl-flex-column-reverse

{/* Justify Content */}

Justify Content

Format: ux4g-flex-{direction/wrap}

Jc Start ux4g-jc-start

Jc End ux4g-jc-end

Jc Center ux4g-jc-center

Jc Between ux4g-jc-between

Jc Around ux4g-jc-around

Jc Evenly ux4g-jc-evenly

Sm Jc Start ux4g-sm-jc-start

Sm Jc End ux4g-sm-jc-end

Sm Jc Center ux4g-sm-jc-center

Sm Jc Between ux4g-sm-jc-between

Sm Jc Around ux4g-sm-jc-around

Sm Jc Evenly ux4g-sm-jc-evenly

Md Jc Start ux4g-md-jc-start

Md Jc End ux4g-md-jc-end

Md Jc Center ux4g-md-jc-center

Md Jc Between ux4g-md-jc-between

Md Jc Around ux4g-md-jc-around

Md Jc Evenly ux4g-md-jc-evenly

Lg Jc Start ux4g-lg-jc-start

Lg Jc End ux4g-lg-jc-end

Lg Jc Center ux4g-lg-jc-center

Lg Jc Between ux4g-lg-jc-between

Lg Jc Around ux4g-lg-jc-around

Lg Jc Evenly ux4g-lg-jc-evenly

Xl Jc Start ux4g-xl-jc-start

Xl Jc End ux4g-xl-jc-end

Xl Jc Center ux4g-xl-jc-center

Xl Jc Between ux4g-xl-jc-between

Xl Jc Around ux4g-xl-jc-around

Xl Jc Evenly ux4g-xl-jc-evenly

2xl Jc Start ux4g-2xl-jc-start

2xl Jc End ux4g-2xl-jc-end

2xl Jc Center ux4g-2xl-jc-center

2xl Jc Between ux4g-2xl-jc-between

2xl Jc Around ux4g-2xl-jc-around

2xl Jc Evenly ux4g-2xl-jc-evenly

{/* Align Items */}

Align Items

Format: ux4g-flex-{direction/wrap}

Ai Start ux4g-ai-start

Ai Center ux4g-ai-center

Ai End ux4g-ai-end

Ai Stretch ux4g-ai-stretch

Ai Baseline ux4g-ai-baseline

Sm Ai Start ux4g-sm-ai-start

Sm Ai Center ux4g-sm-ai-center

Sm Ai End ux4g-sm-ai-end

Sm Ai Stretch ux4g-sm-ai-stretch

Sm Ai Baseline ux4g-sm-ai-baseline

Md Ai Start ux4g-md-ai-start

Md Ai Center ux4g-md-ai-center

Md Ai End ux4g-md-ai-end

Md Ai Stretch ux4g-md-ai-stretch

Md Ai Baseline ux4g-md-ai-baseline

Lg Ai Start ux4g-lg-ai-start

Lg Ai Center ux4g-lg-ai-center

Lg Ai End ux4g-lg-ai-end

Lg Ai Stretch ux4g-lg-ai-stretch

Lg Ai Baseline ux4g-lg-ai-baseline

Xl Ai Start ux4g-xl-ai-start

Xl Ai Center ux4g-xl-ai-center

Xl Ai End ux4g-xl-ai-end

Xl Ai Stretch ux4g-xl-ai-stretch

Xl Ai Baseline ux4g-xl-ai-baseline

2xl Ai Start ux4g-2xl-ai-start

2xl Ai Center ux4g-2xl-ai-center

2xl Ai End ux4g-2xl-ai-end

2xl Ai Stretch ux4g-2xl-ai-stretch

2xl Ai Baseline ux4g-2xl-ai-baseline

{/* Align Self */}

Align Self

Format: ux4g-flex-{direction/wrap}

As Start ux4g-as-start

As End ux4g-as-end

As Center ux4g-as-center

As Baseline ux4g-as-baseline

As Stretch ux4g-as-stretch

Sm As Start ux4g-sm-as-start

Sm As End ux4g-sm-as-end

Sm As Center ux4g-sm-as-center

Sm As Baseline ux4g-sm-as-baseline

Sm As Stretch ux4g-sm-as-stretch

Md As Start ux4g-md-as-start

Md As End ux4g-md-as-end

Md As Center ux4g-md-as-center

Md As Baseline ux4g-md-as-baseline

Md As Stretch ux4g-md-as-stretch

Lg As Start ux4g-lg-as-start

Lg As End ux4g-lg-as-end

Lg As Center ux4g-lg-as-center

Lg As Baseline ux4g-lg-as-baseline

Lg As Stretch ux4g-lg-as-stretch

Xl As Start ux4g-xl-as-start

Xl As End ux4g-xl-as-end

Xl As Center ux4g-xl-as-center

Xl As Baseline ux4g-xl-as-baseline

Xl As Stretch ux4g-xl-as-stretch

2xl As Start ux4g-2xl-as-start

2xl As End ux4g-2xl-as-end

2xl As Center ux4g-2xl-as-center

2xl As Baseline ux4g-2xl-as-baseline

2xl As Stretch ux4g-2xl-as-stretch

{/* Align Content */}

Align Content

Format: ux4g-flex-{direction/wrap}

Ac Start ux4g-ac-start

Ac End ux4g-ac-end

Ac Center ux4g-ac-center

Ac Between ux4g-ac-between

Ac Around ux4g-ac-around

Ac Stretch ux4g-ac-stretch

Sm Ac Start ux4g-sm-ac-start

Sm Ac End ux4g-sm-ac-end

Sm Ac Center ux4g-sm-ac-center

Sm Ac Between ux4g-sm-ac-between

Sm Ac Around ux4g-sm-ac-around

Sm Ac Stretch ux4g-sm-ac-stretch

Md Ac Start ux4g-md-ac-start

Md Ac End ux4g-md-ac-end

Md Ac Center ux4g-md-ac-center

Md Ac Between ux4g-md-ac-between

Md Ac Around ux4g-md-ac-around

Md Ac Stretch ux4g-md-ac-stretch

Lg Ac Start ux4g-lg-ac-start

Lg Ac End ux4g-lg-ac-end

Lg Ac Center ux4g-lg-ac-center

Lg Ac Between ux4g-lg-ac-between

Lg Ac Around ux4g-lg-ac-around

Lg Ac Stretch ux4g-lg-ac-stretch

Xl Ac Start ux4g-xl-ac-start

Xl Ac End ux4g-xl-ac-end

Xl Ac Center ux4g-xl-ac-center

Xl Ac Between ux4g-xl-ac-between

Xl Ac Around ux4g-xl-ac-around

Xl Ac Stretch ux4g-xl-ac-stretch

2xl Ac Start ux4g-2xl-ac-start

2xl Ac End ux4g-2xl-ac-end

2xl Ac Center ux4g-2xl-ac-center

2xl Ac Between ux4g-2xl-ac-between

2xl Ac Around ux4g-2xl-ac-around

2xl Ac Stretch ux4g-2xl-ac-stretch

{/* Justify Items */}

Justify Items

Format: ux4g-flex-{direction/wrap}

Ji Start ux4g-ji-start

Ji End ux4g-ji-end

Ji Center ux4g-ji-center

Ji Stretch ux4g-ji-stretch

Ji Normal ux4g-ji-normal

Ji Center Safe ux4g-ji-center-safe

Ji End Safe ux4g-ji-end-safe

Sm Ji Start ux4g-sm-ji-start

Sm Ji End ux4g-sm-ji-end

Sm Ji Center ux4g-sm-ji-center

Sm Ji Stretch ux4g-sm-ji-stretch

Sm Ji Normal ux4g-sm-ji-normal

Sm Ji Center Safe ux4g-sm-ji-center-safe

Sm Ji End Safe ux4g-sm-ji-end-safe

Md Ji Start ux4g-md-ji-start

Md Ji End ux4g-md-ji-end

Md Ji Center ux4g-md-ji-center

Md Ji Stretch ux4g-md-ji-stretch

Md Ji Normal ux4g-md-ji-normal

Md Ji Center Safe ux4g-md-ji-center-safe

Md Ji End Safe ux4g-md-ji-end-safe

Lg Ji Start ux4g-lg-ji-start

Lg Ji End ux4g-lg-ji-end

Lg Ji Center ux4g-lg-ji-center

Lg Ji Stretch ux4g-lg-ji-stretch

Lg Ji Normal ux4g-lg-ji-normal

Lg Ji Center Safe ux4g-lg-ji-center-safe

Lg Ji End Safe ux4g-lg-ji-end-safe

Xl Ji Start ux4g-xl-ji-start

Xl Ji End ux4g-xl-ji-end

Xl Ji Center ux4g-xl-ji-center

Xl Ji Stretch ux4g-xl-ji-stretch

Xl Ji Normal ux4g-xl-ji-normal

Xl Ji Center Safe ux4g-xl-ji-center-safe

Xl Ji End Safe ux4g-xl-ji-end-safe

2xl Ji Start ux4g-2xl-ji-start

2xl Ji End ux4g-2xl-ji-end

2xl Ji Center ux4g-2xl-ji-center

2xl Ji Stretch ux4g-2xl-ji-stretch

2xl Ji Normal ux4g-2xl-ji-normal

2xl Ji Center Safe ux4g-2xl-ji-center-safe

2xl Ji End Safe ux4g-2xl-ji-end-safe

{/* Justify Self */}

Justify Self

Format: ux4g-flex-{direction/wrap}

Js Auto ux4g-js-auto

Js Start ux4g-js-start

Js End ux4g-js-end

Js Center ux4g-js-center

Js Stretch ux4g-js-stretch

Js Center Safe ux4g-js-center-safe

Js End Safe ux4g-js-end-safe

Sm Js Auto ux4g-sm-js-auto

Sm Js Start ux4g-sm-js-start

Sm Js End ux4g-sm-js-end

Sm Js Center ux4g-sm-js-center

Sm Js Stretch ux4g-sm-js-stretch

Sm Js Center Safe ux4g-sm-js-center-safe

Sm Js End Safe ux4g-sm-js-end-safe

Md Js Auto ux4g-md-js-auto

Md Js Start ux4g-md-js-start

Md Js End ux4g-md-js-end

Md Js Center ux4g-md-js-center

Md Js Stretch ux4g-md-js-stretch

Md Js Center Safe ux4g-md-js-center-safe

Md Js End Safe ux4g-md-js-end-safe

Lg Js Auto ux4g-lg-js-auto

Lg Js Start ux4g-lg-js-start

Lg Js End ux4g-lg-js-end

Lg Js Center ux4g-lg-js-center

Lg Js Stretch ux4g-lg-js-stretch

Lg Js Center Safe ux4g-lg-js-center-safe

Lg Js End Safe ux4g-lg-js-end-safe

Xl Js Auto ux4g-xl-js-auto

Xl Js Start ux4g-xl-js-start

Xl Js End ux4g-xl-js-end

Xl Js Center ux4g-xl-js-center

Xl Js Stretch ux4g-xl-js-stretch

Xl Js Center Safe ux4g-xl-js-center-safe

Xl Js End Safe ux4g-xl-js-end-safe

2xl Js Auto ux4g-2xl-js-auto

2xl Js Start ux4g-2xl-js-start

2xl Js End ux4g-2xl-js-end

2xl Js Center ux4g-2xl-js-center

2xl Js Stretch ux4g-2xl-js-stretch

2xl Js Center Safe ux4g-2xl-js-center-safe

2xl Js End Safe ux4g-2xl-js-end-safe

{/* Visual Order */}

Visual Order

Format: ux4g-flex-{direction/wrap}

Order First ux4g-order-first

Order Last ux4g-order-last

Order 0 ux4g-order-0

Order 1 ux4g-order-1

Order 2 ux4g-order-2

Order 3 ux4g-order-3

Order 4 ux4g-order-4

Order 5 ux4g-order-5

Sm Order First ux4g-sm-order-first

Sm Order Last ux4g-sm-order-last

Sm Order 0 ux4g-sm-order-0

Sm Order 1 ux4g-sm-order-1

Sm Order 2 ux4g-sm-order-2

Sm Order 3 ux4g-sm-order-3

Sm Order 4 ux4g-sm-order-4

Sm Order 5 ux4g-sm-order-5

Md Order First ux4g-md-order-first

Md Order Last ux4g-md-order-last

Md Order 0 ux4g-md-order-0

Md Order 1 ux4g-md-order-1

Md Order 2 ux4g-md-order-2

Md Order 3 ux4g-md-order-3

Md Order 4 ux4g-md-order-4

Md Order 5 ux4g-md-order-5

Lg Order First ux4g-lg-order-first

Lg Order Last ux4g-lg-order-last

Lg Order 0 ux4g-lg-order-0

Lg Order 1 ux4g-lg-order-1

Lg Order 2 ux4g-lg-order-2

Lg Order 3 ux4g-lg-order-3

Lg Order 4 ux4g-lg-order-4

Lg Order 5 ux4g-lg-order-5

Xl Order First ux4g-xl-order-first

Xl Order Last ux4g-xl-order-last

Xl Order 0 ux4g-xl-order-0

Xl Order 1 ux4g-xl-order-1

Xl Order 2 ux4g-xl-order-2

Xl Order 3 ux4g-xl-order-3

Xl Order 4 ux4g-xl-order-4

Xl Order 5 ux4g-xl-order-5

2xl Order First ux4g-2xl-order-first

2xl Order Last ux4g-2xl-order-last

2xl Order 0 ux4g-2xl-order-0

2xl Order 1 ux4g-2xl-order-1

2xl Order 2 ux4g-2xl-order-2

2xl Order 3 ux4g-2xl-order-3

2xl Order 4 ux4g-2xl-order-4

2xl Order 5 ux4g-2xl-order-5

{/* Wrap, Fill, Grow & Shrink */}

Wrap, Fill & Grow

Format: ux4g-flex-{direction/wrap}

Wrap ux4g-wrap

Nowrap ux4g-nowrap

Wrap Reverse ux4g-wrap-reverse

Flex Fill ux4g-flex-fill

Grow ux4g-grow

Grow 0 ux4g-grow-0

Shrink ux4g-shrink

Shrink 0 ux4g-shrink-0

Sm Wrap ux4g-sm-wrap

Sm Nowrap ux4g-sm-nowrap

Sm Wrap Reverse ux4g-sm-wrap-reverse

Sm Flex Fill ux4g-sm-flex-fill

Sm Grow ux4g-sm-grow

Sm Grow 0 ux4g-sm-grow-0

Sm Shrink ux4g-sm-shrink

Sm Shrink 0 ux4g-sm-shrink-0

Md Wrap ux4g-md-wrap

Md Nowrap ux4g-md-nowrap

Md Wrap Reverse ux4g-md-wrap-reverse

Md Flex Fill ux4g-md-flex-fill

Md Grow ux4g-md-grow

Md Grow 0 ux4g-md-grow-0

Md Shrink ux4g-md-shrink

Md Shrink 0 ux4g-md-shrink-0

Lg Wrap ux4g-lg-wrap

Lg Nowrap ux4g-lg-nowrap

Lg Wrap Reverse ux4g-lg-wrap-reverse

Lg Flex Fill ux4g-lg-flex-fill

Lg Grow ux4g-lg-grow

Lg Grow 0 ux4g-lg-grow-0

Lg Shrink ux4g-lg-shrink

Lg Shrink 0 ux4g-lg-shrink-0

Xl Wrap ux4g-xl-wrap

Xl Nowrap ux4g-xl-nowrap

Xl Wrap Reverse ux4g-xl-wrap-reverse

Xl Flex Fill ux4g-xl-flex-fill

Xl Grow ux4g-xl-grow

Xl Grow 0 ux4g-xl-grow-0

Xl Shrink ux4g-xl-shrink

Xl Shrink 0 ux4g-xl-shrink-0

2xl Wrap ux4g-2xl-wrap

2xl Nowrap ux4g-2xl-nowrap

2xl Wrap Reverse ux4g-2xl-wrap-reverse

2xl Flex Fill ux4g-2xl-flex-fill

2xl Grow ux4g-2xl-grow

2xl Grow 0 ux4g-2xl-grow-0

2xl Shrink ux4g-2xl-shrink

2xl Shrink 0 ux4g-2xl-shrink-0

{/* Flex Shorthands (Non-responsive) */}

Flex Shorthands

Format: ux4g-flex-{direction/wrap}

Flex 1 ux4g-flex-1

Flex 2 ux4g-flex-2

Flex 3 ux4g-flex-3

Flex Auto ux4g-flex-auto

Flex None ux4g-flex-none

Display Flex ux4g-d-flex

Display Inline Flex ux4g-d-inline-flex

); export default FlexExample11Demo; ``` Angular: ```html

Utilities

Flex Utilities Reference

A complete reference of all flexbox utility classes, including every responsive variant.

Comprehensive CSS Class Reference

Every class from the utility library, categorized for easy access.

Flex Direction

Format: ux4g-flex-{direction/wrap}

Flex Row ux4g-flex-row

Flex Col ux4g-flex-col

Flex Column ux4g-flex-column

Flex Row Reverse ux4g-flex-row-reverse

Flex Col Reverse ux4g-flex-col-reverse

Flex Column Reverse ux4g-flex-column-reverse

Sm Flex Row ux4g-sm-flex-row

Sm Flex Col ux4g-sm-flex-col

Sm Flex Column ux4g-sm-flex-column

Sm Flex Row Reverse ux4g-sm-flex-row-reverse

Sm Flex Col Reverse ux4g-sm-flex-col-reverse

Sm Flex Column Reverse ux4g-sm-flex-column-reverse

Md Flex Row ux4g-md-flex-row

Md Flex Col ux4g-md-flex-col

Md Flex Column ux4g-md-flex-column

Md Flex Row Reverse ux4g-md-flex-row-reverse

Md Flex Col Reverse ux4g-md-flex-col-reverse

Md Flex Column Reverse ux4g-md-flex-column-reverse

Lg Flex Row ux4g-lg-flex-row

Lg Flex Col ux4g-lg-flex-col

Lg Flex Column ux4g-lg-flex-column

Lg Flex Row Reverse ux4g-lg-flex-row-reverse

Lg Flex Col Reverse ux4g-lg-flex-col-reverse

Lg Flex Column Reverse ux4g-lg-flex-column-reverse

Xl Flex Row ux4g-xl-flex-row

Xl Flex Col ux4g-xl-flex-col

Xl Flex Column ux4g-xl-flex-column

Xl Flex Row Reverse ux4g-xl-flex-row-reverse

Xl Flex Col Reverse ux4g-xl-flex-col-reverse

Xl Flex Column Reverse ux4g-xl-flex-column-reverse

2xl Flex Row ux4g-2xl-flex-row

2xl Flex Col ux4g-2xl-flex-col

2xl Flex Column ux4g-2xl-flex-column

2xl Flex Row Reverse ux4g-2xl-flex-row-reverse

2xl Flex Col Reverse ux4g-2xl-flex-col-reverse

2xl Flex Column Reverse ux4g-2xl-flex-column-reverse

Justify Content

Format: ux4g-flex-{direction/wrap}

Jc Start ux4g-jc-start

Jc End ux4g-jc-end

Jc Center ux4g-jc-center

Jc Between ux4g-jc-between

Jc Around ux4g-jc-around

Jc Evenly ux4g-jc-evenly

Sm Jc Start ux4g-sm-jc-start

Sm Jc End ux4g-sm-jc-end

Sm Jc Center ux4g-sm-jc-center

Sm Jc Between ux4g-sm-jc-between

Sm Jc Around ux4g-sm-jc-around

Sm Jc Evenly ux4g-sm-jc-evenly

Md Jc Start ux4g-md-jc-start

Md Jc End ux4g-md-jc-end

Md Jc Center ux4g-md-jc-center

Md Jc Between ux4g-md-jc-between

Md Jc Around ux4g-md-jc-around

Md Jc Evenly ux4g-md-jc-evenly

Lg Jc Start ux4g-lg-jc-start

Lg Jc End ux4g-lg-jc-end

Lg Jc Center ux4g-lg-jc-center

Lg Jc Between ux4g-lg-jc-between

Lg Jc Around ux4g-lg-jc-around

Lg Jc Evenly ux4g-lg-jc-evenly

Xl Jc Start ux4g-xl-jc-start

Xl Jc End ux4g-xl-jc-end

Xl Jc Center ux4g-xl-jc-center

Xl Jc Between ux4g-xl-jc-between

Xl Jc Around ux4g-xl-jc-around

Xl Jc Evenly ux4g-xl-jc-evenly

2xl Jc Start ux4g-2xl-jc-start

2xl Jc End ux4g-2xl-jc-end

2xl Jc Center ux4g-2xl-jc-center

2xl Jc Between ux4g-2xl-jc-between

2xl Jc Around ux4g-2xl-jc-around

2xl Jc Evenly ux4g-2xl-jc-evenly

Align Items

Format: ux4g-flex-{direction/wrap}

Ai Start ux4g-ai-start

Ai Center ux4g-ai-center

Ai End ux4g-ai-end

Ai Stretch ux4g-ai-stretch

Ai Baseline ux4g-ai-baseline

Sm Ai Start ux4g-sm-ai-start

Sm Ai Center ux4g-sm-ai-center

Sm Ai End ux4g-sm-ai-end

Sm Ai Stretch ux4g-sm-ai-stretch

Sm Ai Baseline ux4g-sm-ai-baseline

Md Ai Start ux4g-md-ai-start

Md Ai Center ux4g-md-ai-center

Md Ai End ux4g-md-ai-end

Md Ai Stretch ux4g-md-ai-stretch

Md Ai Baseline ux4g-md-ai-baseline

Lg Ai Start ux4g-lg-ai-start

Lg Ai Center ux4g-lg-ai-center

Lg Ai End ux4g-lg-ai-end

Lg Ai Stretch ux4g-lg-ai-stretch

Lg Ai Baseline ux4g-lg-ai-baseline

Xl Ai Start ux4g-xl-ai-start

Xl Ai Center ux4g-xl-ai-center

Xl Ai End ux4g-xl-ai-end

Xl Ai Stretch ux4g-xl-ai-stretch

Xl Ai Baseline ux4g-xl-ai-baseline

2xl Ai Start ux4g-2xl-ai-start

2xl Ai Center ux4g-2xl-ai-center

2xl Ai End ux4g-2xl-ai-end

2xl Ai Stretch ux4g-2xl-ai-stretch

2xl Ai Baseline ux4g-2xl-ai-baseline

Align Self

Format: ux4g-flex-{direction/wrap}

As Start ux4g-as-start

As End ux4g-as-end

As Center ux4g-as-center

As Baseline ux4g-as-baseline

As Stretch ux4g-as-stretch

Sm As Start ux4g-sm-as-start

Sm As End ux4g-sm-as-end

Sm As Center ux4g-sm-as-center

Sm As Baseline ux4g-sm-as-baseline

Sm As Stretch ux4g-sm-as-stretch

Md As Start ux4g-md-as-start

Md As End ux4g-md-as-end

Md As Center ux4g-md-as-center

Md As Baseline ux4g-md-as-baseline

Md As Stretch ux4g-md-as-stretch

Lg As Start ux4g-lg-as-start

Lg As End ux4g-lg-as-end

Lg As Center ux4g-lg-as-center

Lg As Baseline ux4g-lg-as-baseline

Lg As Stretch ux4g-lg-as-stretch

Xl As Start ux4g-xl-as-start

Xl As End ux4g-xl-as-end

Xl As Center ux4g-xl-as-center

Xl As Baseline ux4g-xl-as-baseline

Xl As Stretch ux4g-xl-as-stretch

2xl As Start ux4g-2xl-as-start

2xl As End ux4g-2xl-as-end

2xl As Center ux4g-2xl-as-center

2xl As Baseline ux4g-2xl-as-baseline

2xl As Stretch ux4g-2xl-as-stretch

Align Content

Format: ux4g-flex-{direction/wrap}

Ac Start ux4g-ac-start

Ac End ux4g-ac-end

Ac Center ux4g-ac-center

Ac Between ux4g-ac-between

Ac Around ux4g-ac-around

Ac Stretch ux4g-ac-stretch

Sm Ac Start ux4g-sm-ac-start

Sm Ac End ux4g-sm-ac-end

Sm Ac Center ux4g-sm-ac-center

Sm Ac Between ux4g-sm-ac-between

Sm Ac Around ux4g-sm-ac-around

Sm Ac Stretch ux4g-sm-ac-stretch

Md Ac Start ux4g-md-ac-start

Md Ac End ux4g-md-ac-end

Md Ac Center ux4g-md-ac-center

Md Ac Between ux4g-md-ac-between

Md Ac Around ux4g-md-ac-around

Md Ac Stretch ux4g-md-ac-stretch

Lg Ac Start ux4g-lg-ac-start

Lg Ac End ux4g-lg-ac-end

Lg Ac Center ux4g-lg-ac-center

Lg Ac Between ux4g-lg-ac-between

Lg Ac Around ux4g-lg-ac-around

Lg Ac Stretch ux4g-lg-ac-stretch

Xl Ac Start ux4g-xl-ac-start

Xl Ac End ux4g-xl-ac-end

Xl Ac Center ux4g-xl-ac-center

Xl Ac Between ux4g-xl-ac-between

Xl Ac Around ux4g-xl-ac-around

Xl Ac Stretch ux4g-xl-ac-stretch

2xl Ac Start ux4g-2xl-ac-start

2xl Ac End ux4g-2xl-ac-end

2xl Ac Center ux4g-2xl-ac-center

2xl Ac Between ux4g-2xl-ac-between

2xl Ac Around ux4g-2xl-ac-around

2xl Ac Stretch ux4g-2xl-ac-stretch

Justify Items

Format: ux4g-flex-{direction/wrap}

Ji Start ux4g-ji-start

Ji End ux4g-ji-end

Ji Center ux4g-ji-center

Ji Stretch ux4g-ji-stretch

Ji Normal ux4g-ji-normal

Ji Center Safe ux4g-ji-center-safe

Ji End Safe ux4g-ji-end-safe

Sm Ji Start ux4g-sm-ji-start

Sm Ji End ux4g-sm-ji-end

Sm Ji Center ux4g-sm-ji-center

Sm Ji Stretch ux4g-sm-ji-stretch

Sm Ji Normal ux4g-sm-ji-normal

Sm Ji Center Safe ux4g-sm-ji-center-safe

Sm Ji End Safe ux4g-sm-ji-end-safe

Md Ji Start ux4g-md-ji-start

Md Ji End ux4g-md-ji-end

Md Ji Center ux4g-md-ji-center

Md Ji Stretch ux4g-md-ji-stretch

Md Ji Normal ux4g-md-ji-normal

Md Ji Center Safe ux4g-md-ji-center-safe

Md Ji End Safe ux4g-md-ji-end-safe

Lg Ji Start ux4g-lg-ji-start

Lg Ji End ux4g-lg-ji-end

Lg Ji Center ux4g-lg-ji-center

Lg Ji Stretch ux4g-lg-ji-stretch

Lg Ji Normal ux4g-lg-ji-normal

Lg Ji Center Safe ux4g-lg-ji-center-safe

Lg Ji End Safe ux4g-lg-ji-end-safe

Xl Ji Start ux4g-xl-ji-start

Xl Ji End ux4g-xl-ji-end

Xl Ji Center ux4g-xl-ji-center

Xl Ji Stretch ux4g-xl-ji-stretch

Xl Ji Normal ux4g-xl-ji-normal

Xl Ji Center Safe ux4g-xl-ji-center-safe

Xl Ji End Safe ux4g-xl-ji-end-safe

2xl Ji Start ux4g-2xl-ji-start

2xl Ji End ux4g-2xl-ji-end

2xl Ji Center ux4g-2xl-ji-center

2xl Ji Stretch ux4g-2xl-ji-stretch

2xl Ji Normal ux4g-2xl-ji-normal

2xl Ji Center Safe ux4g-2xl-ji-center-safe

2xl Ji End Safe ux4g-2xl-ji-end-safe

Justify Self

Format: ux4g-flex-{direction/wrap}

Js Auto ux4g-js-auto

Js Start ux4g-js-start

Js End ux4g-js-end

Js Center ux4g-js-center

Js Stretch ux4g-js-stretch

Js Center Safe ux4g-js-center-safe

Js End Safe ux4g-js-end-safe

Sm Js Auto ux4g-sm-js-auto

Sm Js Start ux4g-sm-js-start

Sm Js End ux4g-sm-js-end

Sm Js Center ux4g-sm-js-center

Sm Js Stretch ux4g-sm-js-stretch

Sm Js Center Safe ux4g-sm-js-center-safe

Sm Js End Safe ux4g-sm-js-end-safe

Md Js Auto ux4g-md-js-auto

Md Js Start ux4g-md-js-start

Md Js End ux4g-md-js-end

Md Js Center ux4g-md-js-center

Md Js Stretch ux4g-md-js-stretch

Md Js Center Safe ux4g-md-js-center-safe

Md Js End Safe ux4g-md-js-end-safe

Lg Js Auto ux4g-lg-js-auto

Lg Js Start ux4g-lg-js-start

Lg Js End ux4g-lg-js-end

Lg Js Center ux4g-lg-js-center

Lg Js Stretch ux4g-lg-js-stretch

Lg Js Center Safe ux4g-lg-js-center-safe

Lg Js End Safe ux4g-lg-js-end-safe

Xl Js Auto ux4g-xl-js-auto

Xl Js Start ux4g-xl-js-start

Xl Js End ux4g-xl-js-end

Xl Js Center ux4g-xl-js-center

Xl Js Stretch ux4g-xl-js-stretch

Xl Js Center Safe ux4g-xl-js-center-safe

Xl Js End Safe ux4g-xl-js-end-safe

2xl Js Auto ux4g-2xl-js-auto

2xl Js Start ux4g-2xl-js-start

2xl Js End ux4g-2xl-js-end

2xl Js Center ux4g-2xl-js-center

2xl Js Stretch ux4g-2xl-js-stretch

2xl Js Center Safe ux4g-2xl-js-center-safe

2xl Js End Safe ux4g-2xl-js-end-safe

Visual Order

Format: ux4g-flex-{direction/wrap}

Order First ux4g-order-first

Order Last ux4g-order-last

Order 0 ux4g-order-0

Order 1 ux4g-order-1

Order 2 ux4g-order-2

Order 3 ux4g-order-3

Order 4 ux4g-order-4

Order 5 ux4g-order-5

Sm Order First ux4g-sm-order-first

Sm Order Last ux4g-sm-order-last

Sm Order 0 ux4g-sm-order-0

Sm Order 1 ux4g-sm-order-1

Sm Order 2 ux4g-sm-order-2

Sm Order 3 ux4g-sm-order-3

Sm Order 4 ux4g-sm-order-4

Sm Order 5 ux4g-sm-order-5

Md Order First ux4g-md-order-first

Md Order Last ux4g-md-order-last

Md Order 0 ux4g-md-order-0

Md Order 1 ux4g-md-order-1

Md Order 2 ux4g-md-order-2

Md Order 3 ux4g-md-order-3

Md Order 4 ux4g-md-order-4

Md Order 5 ux4g-md-order-5

Lg Order First ux4g-lg-order-first

Lg Order Last ux4g-lg-order-last

Lg Order 0 ux4g-lg-order-0

Lg Order 1 ux4g-lg-order-1

Lg Order 2 ux4g-lg-order-2

Lg Order 3 ux4g-lg-order-3

Lg Order 4 ux4g-lg-order-4

Lg Order 5 ux4g-lg-order-5

Xl Order First ux4g-xl-order-first

Xl Order Last ux4g-xl-order-last

Xl Order 0 ux4g-xl-order-0

Xl Order 1 ux4g-xl-order-1

Xl Order 2 ux4g-xl-order-2

Xl Order 3 ux4g-xl-order-3

Xl Order 4 ux4g-xl-order-4

Xl Order 5 ux4g-xl-order-5

2xl Order First ux4g-2xl-order-first

2xl Order Last ux4g-2xl-order-last

2xl Order 0 ux4g-2xl-order-0

2xl Order 1 ux4g-2xl-order-1

2xl Order 2 ux4g-2xl-order-2

2xl Order 3 ux4g-2xl-order-3

2xl Order 4 ux4g-2xl-order-4

2xl Order 5 ux4g-2xl-order-5

Wrap, Fill & Grow

Format: ux4g-flex-{direction/wrap}

Wrap ux4g-wrap

Nowrap ux4g-nowrap

Wrap Reverse ux4g-wrap-reverse

Flex Fill ux4g-flex-fill

Grow ux4g-grow

Grow 0 ux4g-grow-0

Shrink ux4g-shrink

Shrink 0 ux4g-shrink-0

Sm Wrap ux4g-sm-wrap

Sm Nowrap ux4g-sm-nowrap

Sm Wrap Reverse ux4g-sm-wrap-reverse

Sm Flex Fill ux4g-sm-flex-fill

Sm Grow ux4g-sm-grow

Sm Grow 0 ux4g-sm-grow-0

Sm Shrink ux4g-sm-shrink

Sm Shrink 0 ux4g-sm-shrink-0

Md Wrap ux4g-md-wrap

Md Nowrap ux4g-md-nowrap

Md Wrap Reverse ux4g-md-wrap-reverse

Md Flex Fill ux4g-md-flex-fill

Md Grow ux4g-md-grow

Md Grow 0 ux4g-md-grow-0

Md Shrink ux4g-md-shrink

Md Shrink 0 ux4g-md-shrink-0

Lg Wrap ux4g-lg-wrap

Lg Nowrap ux4g-lg-nowrap

Lg Wrap Reverse ux4g-lg-wrap-reverse

Lg Flex Fill ux4g-lg-flex-fill

Lg Grow ux4g-lg-grow

Lg Grow 0 ux4g-lg-grow-0

Lg Shrink ux4g-lg-shrink

Lg Shrink 0 ux4g-lg-shrink-0

Xl Wrap ux4g-xl-wrap

Xl Nowrap ux4g-xl-nowrap

Xl Wrap Reverse ux4g-xl-wrap-reverse

Xl Flex Fill ux4g-xl-flex-fill

Xl Grow ux4g-xl-grow

Xl Grow 0 ux4g-xl-grow-0

Xl Shrink ux4g-xl-shrink

Xl Shrink 0 ux4g-xl-shrink-0

2xl Wrap ux4g-2xl-wrap

2xl Nowrap ux4g-2xl-nowrap

2xl Wrap Reverse ux4g-2xl-wrap-reverse

2xl Flex Fill ux4g-2xl-flex-fill

2xl Grow ux4g-2xl-grow

2xl Grow 0 ux4g-2xl-grow-0

2xl Shrink ux4g-2xl-shrink

2xl Shrink 0 ux4g-2xl-shrink-0

Flex Shorthands

Format: ux4g-flex-{direction/wrap}

Flex 1 ux4g-flex-1

Flex 2 ux4g-flex-2

Flex 3 ux4g-flex-3

Flex Auto ux4g-flex-auto

Flex None ux4g-flex-none

Display Flex ux4g-d-flex

Display Inline Flex ux4g-d-inline-flex

``` ## CSS class reference The following CSS partials define the Flex utility classes used in the examples above: ### flex.utilities.css ```css /* ========================================= FLEX DIRECTION ========================================= */ .ux4g-flex-row { flex-direction: row; } .ux4g-flex-col, .ux4g-flex-column { flex-direction: column; } .ux4g-flex-row-reverse { flex-direction: row-reverse; } .ux4g-flex-col-reverse, .ux4g-flex-column-reverse { flex-direction: column-reverse; } /* ========================================= FLEX (SHORTHANDS) ========================================= */ .ux4g-flex-1 { flex: 1; } .ux4g-flex-2 { flex: 2; } .ux4g-flex-3 { flex: 3; } .ux4g-flex-auto { flex: 1 1 auto; } .ux4g-flex-none { flex: none; } /* ========================================= FLEX WRAP ========================================= */ .ux4g-wrap { flex-wrap: wrap; } .ux4g-nowrap { flex-wrap: nowrap; } .ux4g-wrap-reverse { flex-wrap: wrap-reverse; } .ux4g-flex-fill { flex: 1 1 auto; } /* ========================================= FLEX GROW / SHRINK ========================================= */ .ux4g-grow { flex-grow: 1; } .ux4g-grow-0 { flex-grow: 0; } .ux4g-shrink { flex-shrink: 1; } .ux4g-shrink-0 { flex-shrink: 0; } ``` ### flex-responsive.utilities.css ```css /* ========================================= RESPONSIVE FLEX UTILITIES Summary: Direction, Wrap, Fill, Grow/Shrink ========================================= */ /* ================= SM ≥ 576px ================= */ @media (min-width: 576px) { /* Direction */ .ux4g-sm-flex-row { flex-direction: row; } .ux4g-sm-flex-col { flex-direction: column; } .ux4g-sm-flex-row-reverse { flex-direction: row-reverse; } .ux4g-sm-flex-col-reverse { flex-direction: column-reverse; } /* Wrap */ .ux4g-sm-wrap { flex-wrap: wrap; } .ux4g-sm-nowrap { flex-wrap: nowrap; } .ux4g-sm-wrap-reverse { flex-wrap: wrap-reverse; } /* Fill */ .ux4g-sm-flex-fill { flex: 1 1 auto; } /* Grow / Shrink */ .ux4g-sm-grow { flex-grow: 1; } .ux4g-sm-grow-0 { flex-grow: 0; } .ux4g-sm-shrink { flex-shrink: 1; } .ux4g-sm-shrink-0 { flex-shrink: 0; } } /* ================= MD ≥ 768px ================= */ @media (min-width: 768px) { /* Direction */ .ux4g-md-flex-row { flex-direction: row; } .ux4g-md-flex-col { flex-direction: column; } .ux4g-md-flex-row-reverse { flex-direction: row-reverse; } .ux4g-md-flex-col-reverse { flex-direction: column-reverse; } /* Wrap */ .ux4g-md-wrap { flex-wrap: wrap; } .ux4g-md-nowrap { flex-wrap: nowrap; } .ux4g-md-wrap-reverse { flex-wrap: wrap-reverse; } /* Fill */ .ux4g-md-flex-fill { flex: 1 1 auto; } /* Grow / Shrink */ .ux4g-md-grow { flex-grow: 1; } .ux4g-md-grow-0 { flex-grow: 0; } .ux4g-md-shrink { flex-shrink: 1; } .ux4g-md-shrink-0 { flex-shrink: 0; } } /* ================= LG ≥ 992px ================= */ @media (min-width: 992px) { /* Direction */ .ux4g-lg-flex-row { flex-direction: row; } .ux4g-lg-flex-col { flex-direction: column; } .ux4g-lg-flex-row-reverse { flex-direction: row-reverse; } .ux4g-lg-flex-col-reverse { flex-direction: column-reverse; } /* Wrap */ .ux4g-lg-wrap { flex-wrap: wrap; } .ux4g-lg-nowrap { flex-wrap: nowrap; } .ux4g-lg-wrap-reverse { flex-wrap: wrap-reverse; } /* Fill */ .ux4g-lg-flex-fill { flex: 1 1 auto; } /* Grow / Shrink */ .ux4g-lg-grow { flex-grow: 1; } .ux4g-lg-grow-0 { flex-grow: 0; } .ux4g-lg-shrink { flex-shrink: 1; } .ux4g-lg-shrink-0 { flex-shrink: 0; } } /* ================= XL ≥ 1200px ================= */ @media (min-width: 1200px) { /* Direction */ .ux4g-xl-flex-row { flex-direction: row; } .ux4g-xl-flex-col { flex-direction: column; } .ux4g-xl-flex-row-reverse { flex-direction: row-reverse; } .ux4g-xl-flex-col-reverse { flex-direction: column-reverse; } /* Wrap */ .ux4g-xl-wrap { flex-wrap: wrap; } .ux4g-xl-nowrap { flex-wrap: nowrap; } .ux4g-xl-wrap-reverse { flex-wrap: wrap-reverse; } /* Fill */ .ux4g-xl-flex-fill { flex: 1 1 auto; } /* Grow / Shrink */ .ux4g-xl-grow { flex-grow: 1; } .ux4g-xl-grow-0 { flex-grow: 0; } .ux4g-xl-shrink { flex-shrink: 1; } .ux4g-xl-shrink-0 { flex-shrink: 0; } } /* ================= 2XL ≥ 1400px ================= */ @media (min-width: 1400px) { /* Direction */ .ux4g-2xl-flex-row { flex-direction: row; } .ux4g-2xl-flex-col { flex-direction: column; } .ux4g-2xl-flex-row-reverse { flex-direction: row-reverse; } .ux4g-2xl-flex-col-reverse { flex-direction: column-reverse; } /* Wrap */ .ux4g-2xl-wrap { flex-wrap: wrap; } .ux4g-2xl-nowrap { flex-wrap: nowrap; } .ux4g-2xl-wrap-reverse { flex-wrap: wrap-reverse; } /* Fill */ .ux4g-2xl-flex-fill { flex: 1 1 auto; } /* Grow / Shrink */ .ux4g-2xl-grow { flex-grow: 1; } .ux4g-2xl-grow-0 { flex-grow: 0; } .ux4g-2xl-shrink { flex-shrink: 1; } .ux4g-2xl-shrink-0 { flex-shrink: 0; } } ``` ### align.utilities.css ```css /* ========================================= ALIGN UTILITIES Controls alignment of flex items. 1. Align Items (ai) 2. Align Self (as) 3. Align Content (ac) ========================================= */ /* 1.0 ALIGN ITEMS */ .ux4g-ai-start { align-items: flex-start; } .ux4g-ai-center { align-items: center; } .ux4g-ai-end { align-items: flex-end; } .ux4g-ai-stretch { align-items: stretch; } .ux4g-ai-baseline { align-items: baseline; } /* 2.0 ALIGN SELF */ .ux4g-as-start { align-self: flex-start; } .ux4g-as-end { align-self: flex-end; } .ux4g-as-center { align-self: center; } .ux4g-as-baseline { align-self: baseline; } .ux4g-as-stretch { align-self: stretch; } /* 3.0 ALIGN CONTENT */ .ux4g-ac-start { align-content: flex-start; } .ux4g-ac-end { align-content: flex-end; } .ux4g-ac-center { align-content: center; } .ux4g-ac-between { align-content: space-between; } .ux4g-ac-around { align-content: space-around; } .ux4g-ac-stretch { align-content: stretch; } /* ================= RESPONSIVE ================= */ /* ================= SM ≥ 576px ================= */ @media (min-width: 576px) { /* ALIGN ITEMS */ .ux4g-sm-ai-start { align-items: flex-start; } .ux4g-sm-ai-end { align-items: flex-end; } .ux4g-sm-ai-center { align-items: center; } .ux4g-sm-ai-baseline { align-items: baseline; } .ux4g-sm-ai-stretch { align-items: stretch; } /* ALIGN SELF */ .ux4g-sm-as-start { align-self: flex-start; } .ux4g-sm-as-end { align-self: flex-end; } .ux4g-sm-as-center { align-self: center; } .ux4g-sm-as-baseline { align-self: baseline; } .ux4g-sm-as-stretch { align-self: stretch; } /* ALIGN CONTENT */ .ux4g-sm-ac-start { align-content: flex-start; } .ux4g-sm-ac-end { align-content: flex-end; } .ux4g-sm-ac-center { align-content: center; } .ux4g-sm-ac-between { align-content: space-between; } .ux4g-sm-ac-around { align-content: space-around; } .ux4g-sm-ac-stretch { align-content: stretch; } } /* ================= MD ≥ 768px ================= */ @media (min-width: 768px) { /* ALIGN ITEMS */ .ux4g-md-ai-start { align-items: flex-start; } .ux4g-md-ai-end { align-items: flex-end; } .ux4g-md-ai-center { align-items: center; } .ux4g-md-ai-baseline { align-items: baseline; } .ux4g-md-ai-stretch { align-items: stretch; } /* ALIGN SELF */ .ux4g-md-as-start { align-self: flex-start; } .ux4g-md-as-end { align-self: flex-end; } .ux4g-md-as-center { align-self: center; } .ux4g-md-as-baseline { align-self: baseline; } .ux4g-md-as-stretch { align-self: stretch; } /* ALIGN CONTENT */ .ux4g-md-ac-start { align-content: flex-start; } .ux4g-md-ac-end { align-content: flex-end; } .ux4g-md-ac-center { align-content: center; } .ux4g-md-ac-between { align-content: space-between; } .ux4g-md-ac-around { align-content: space-around; } .ux4g-md-ac-stretch { align-content: stretch; } } /* ================= LG ≥ 992px ================= */ @media (min-width: 992px) { /* ALIGN ITEMS */ .ux4g-lg-ai-start { align-items: flex-start; } .ux4g-lg-ai-end { align-items: flex-end; } .ux4g-lg-ai-center { align-items: center; } .ux4g-lg-ai-baseline { align-items: baseline; } .ux4g-lg-ai-stretch { align-items: stretch; } /* ALIGN SELF */ .ux4g-lg-as-start { align-self: flex-start; } .ux4g-lg-as-end { align-self: flex-end; } .ux4g-lg-as-center { align-self: center; } .ux4g-lg-as-baseline { align-self: baseline; } .ux4g-lg-as-stretch { align-self: stretch; } /* ALIGN CONTENT */ .ux4g-lg-ac-start { align-content: flex-start; } .ux4g-lg-ac-end { align-content: flex-end; } .ux4g-lg-ac-center { align-content: center; } .ux4g-lg-ac-between { align-content: space-between; } .ux4g-lg-ac-around { align-content: space-around; } .ux4g-lg-ac-stretch { align-content: stretch; } } /* ================= XL ≥ 1200px ================= */ @media (min-width: 1200px) { /* ALIGN ITEMS */ .ux4g-xl-ai-start { align-items: flex-start; } .ux4g-xl-ai-end { align-items: flex-end; } .ux4g-xl-ai-center { align-items: center; } .ux4g-xl-ai-baseline { align-items: baseline; } .ux4g-xl-ai-stretch { align-items: stretch; } /* ALIGN SELF */ .ux4g-xl-as-start { align-self: flex-start; } .ux4g-xl-as-end { align-self: flex-end; } .ux4g-xl-as-center { align-self: center; } .ux4g-xl-as-baseline { align-self: baseline; } .ux4g-xl-as-stretch { align-self: stretch; } /* ALIGN CONTENT */ .ux4g-xl-ac-start { align-content: flex-start; } .ux4g-xl-ac-end { align-content: flex-end; } .ux4g-xl-ac-center { align-content: center; } .ux4g-xl-ac-between { align-content: space-between; } .ux4g-xl-ac-around { align-content: space-around; } .ux4g-xl-ac-stretch { align-content: stretch; } } /* ================= 2XL ≥ 1400px ================= */ @media (min-width: 1400px) { /* ALIGN ITEMS */ .ux4g-2xl-ai-start { align-items: flex-start; } .ux4g-2xl-ai-end { align-items: flex-end; } .ux4g-2xl-ai-center { align-items: center; } .ux4g-2xl-ai-baseline { align-items: baseline; } .ux4g-2xl-ai-stretch { align-items: stretch; } /* ALIGN SELF */ .ux4g-2xl-as-start { align-self: flex-start; } .ux4g-2xl-as-end { align-self: flex-end; } .ux4g-2xl-as-center { align-self: center; } .ux4g-2xl-as-baseline { align-self: baseline; } .ux4g-2xl-as-stretch { align-self: stretch; } /* ALIGN CONTENT */ .ux4g-2xl-ac-start { align-content: flex-start; } .ux4g-2xl-ac-end { align-content: flex-end; } .ux4g-2xl-ac-center { align-content: center; } .ux4g-2xl-ac-between { align-content: space-between; } .ux4g-2xl-ac-around { align-content: space-around; } .ux4g-2xl-ac-stretch { align-content: stretch; } } ``` ### justify.utilities.css ```css /* ========================================= JUSTIFY UTILITIES Controls justification of flex/grid items. 1. Justify Content (jc) 2. Justify Items (ji) 3. Justify Self (js) ========================================= */ /* 1.0 JUSTIFY CONTENT */ .ux4g-jc-start { justify-content: flex-start; } .ux4g-jc-end { justify-content: flex-end; } .ux4g-jc-center { justify-content: center; } .ux4g-jc-between { justify-content: space-between; } .ux4g-jc-around { justify-content: space-around; } .ux4g-jc-evenly { justify-content: space-evenly; } /* 2.0 JUSTIFY ITEMS */ .ux4g-ji-start { justify-items: start; } .ux4g-ji-end { justify-items: end; } .ux4g-ji-center { justify-items: center; } .ux4g-ji-stretch { justify-items: stretch; } .ux4g-ji-normal { justify-items: normal; } .ux4g-ji-center-safe { justify-items: safe center; } .ux4g-ji-end-safe { justify-items: safe end; } /* 3.0 JUSTIFY SELF */ .ux4g-js-auto { justify-self: auto; } .ux4g-js-start { justify-self: start; } .ux4g-js-end { justify-self: end; } .ux4g-js-center { justify-self: center; } .ux4g-js-stretch { justify-self: stretch; } .ux4g-js-center-safe { justify-self: safe center; } .ux4g-js-end-safe { justify-self: safe end; } /* ================= RESPONSIVE ================= */ /* ================= SM ≥ 576px ================= */ @media (min-width: 576px) { .ux4g-sm-jc-start { justify-content: flex-start; } .ux4g-sm-jc-end { justify-content: flex-end; } .ux4g-sm-jc-center { justify-content: center; } .ux4g-sm-jc-between { justify-content: space-between; } .ux4g-sm-jc-around { justify-content: space-around; } .ux4g-sm-jc-evenly { justify-content: space-evenly; } .ux4g-sm-ji-start { justify-items: start; } .ux4g-sm-ji-end { justify-items: end; } .ux4g-sm-ji-center { justify-items: center; } .ux4g-sm-ji-stretch { justify-items: stretch; } .ux4g-sm-js-start { justify-self: start; } .ux4g-sm-js-end { justify-self: end; } .ux4g-sm-js-center { justify-self: center; } .ux4g-sm-js-stretch { justify-self: stretch; } } /* ================= MD ≥ 768px ================= */ @media (min-width: 768px) { .ux4g-md-jc-start { justify-content: flex-start; } .ux4g-md-jc-end { justify-content: flex-end; } .ux4g-md-jc-center { justify-content: center; } .ux4g-md-jc-between { justify-content: space-between; } .ux4g-md-jc-around { justify-content: space-around; } .ux4g-md-jc-evenly { justify-content: space-evenly; } .ux4g-md-ji-start { justify-items: start; } .ux4g-md-ji-end { justify-items: end; } .ux4g-md-ji-center { justify-items: center; } .ux4g-md-ji-stretch { justify-items: stretch; } .ux4g-md-js-start { justify-self: start; } .ux4g-md-js-end { justify-self: end; } .ux4g-md-js-center { justify-self: center; } .ux4g-md-js-stretch { justify-self: stretch; } } /* ================= LG ≥ 992px ================= */ @media (min-width: 992px) { .ux4g-lg-jc-start { justify-content: flex-start; } .ux4g-lg-jc-end { justify-content: flex-end; } .ux4g-lg-jc-center { justify-content: center; } .ux4g-lg-jc-between { justify-content: space-between; } .ux4g-lg-jc-around { justify-content: space-around; } .ux4g-lg-jc-evenly { justify-content: space-evenly; } .ux4g-lg-ji-start { justify-items: start; } .ux4g-lg-ji-end { justify-items: end; } .ux4g-lg-ji-center { justify-items: center; } .ux4g-lg-ji-stretch { justify-items: stretch; } .ux4g-lg-js-start { justify-self: start; } .ux4g-lg-js-end { justify-self: end; } .ux4g-lg-js-center { justify-self: center; } .ux4g-lg-js-stretch { justify-self: stretch; } } /* ================= XL ≥ 1200px ================= */ @media (min-width: 1200px) { .ux4g-xl-jc-start { justify-content: flex-start; } .ux4g-xl-jc-center { justify-content: center; } .ux4g-xl-jc-between { justify-content: space-between; } .ux4g-xl-jc-around { justify-content: space-around; } .ux4g-xl-jc-evenly { justify-content: space-evenly; } .ux4g-xl-ji-start { justify-items: start; } .ux4g-xl-ji-center { justify-items: center; } .ux4g-xl-ji-stretch { justify-items: stretch; } .ux4g-xl-js-start { justify-self: start; } .ux4g-xl-js-center { justify-self: center; } .ux4g-xl-js-stretch { justify-self: stretch; } } /* ================= 2XL ≥ 1400px ================= */ @media (min-width: 1400px) { .ux4g-2xl-jc-start { justify-content: flex-start; } .ux4g-2xl-jc-center { justify-content: center; } .ux4g-2xl-jc-between { justify-content: space-between; } .ux4g-2xl-jc-around { justify-content: space-around; } .ux4g-2xl-jc-evenly { justify-content: space-evenly; } .ux4g-2xl-ji-start { justify-items: start; } .ux4g-2xl-ji-center { justify-items: center; } .ux4g-2xl-ji-stretch { justify-items: stretch; } .ux4g-2xl-js-start { justify-self: start; } .ux4g-2xl-js-center { justify-self: center; } .ux4g-2xl-js-stretch { justify-self: stretch; } } ``` ### order.utilities.css ```css /* ========================================= ORDER UTILITIES Controls the visual order of flex items. Range: 0-5, first (-1), last (999) ========================================= */ .ux4g-order-first { order: -1; } .ux4g-order-last { order: 999; } .ux4g-order-0 { order: 0; } .ux4g-order-1 { order: 1; } .ux4g-order-2 { order: 2; } .ux4g-order-3 { order: 3; } .ux4g-order-4 { order: 4; } .ux4g-order-5 { order: 5; } /* ================= SM ≥ 576px ================= */ @media (min-width: 576px) { .ux4g-sm-order-first { order: -1; } .ux4g-sm-order-last { order: 999; } .ux4g-sm-order-0 { order: 0; } .ux4g-sm-order-1 { order: 1; } .ux4g-sm-order-2 { order: 2; } .ux4g-sm-order-3 { order: 3; } .ux4g-sm-order-4 { order: 4; } .ux4g-sm-order-5 { order: 5; } } /* ================= MD ≥ 768px ================= */ @media (min-width: 768px) { .ux4g-md-order-first { order: -1; } .ux4g-md-order-last { order: 999; } .ux4g-md-order-0 { order: 0; } .ux4g-md-order-1 { order: 1; } .ux4g-md-order-2 { order: 2; } .ux4g-md-order-3 { order: 3; } .ux4g-md-order-4 { order: 4; } .ux4g-md-order-5 { order: 5; } } /* ================= LG ≥ 992px ================= */ @media (min-width: 992px) { .ux4g-lg-order-first { order: -1; } .ux4g-lg-order-last { order: 999; } .ux4g-lg-order-0 { order: 0; } .ux4g-lg-order-1 { order: 1; } .ux4g-lg-order-2 { order: 2; } .ux4g-lg-order-3 { order: 3; } .ux4g-lg-order-4 { order: 4; } .ux4g-lg-order-5 { order: 5; } } /* ================= XL ≥ 1200px ================= */ @media (min-width: 1200px) { .ux4g-xl-order-first { order: -1; } .ux4g-xl-order-last { order: 999; } .ux4g-xl-order-0 { order: 0; } .ux4g-xl-order-1 { order: 1; } .ux4g-xl-order-2 { order: 2; } .ux4g-xl-order-3 { order: 3; } .ux4g-xl-order-4 { order: 4; } .ux4g-xl-order-5 { order: 5; } } /* ================= 2XL ≥ 1400px ================= */ @media (min-width: 1400px) { .ux4g-2xl-order-first { order: -1; } .ux4g-2xl-order-last { order: 999; } .ux4g-2xl-order-0 { order: 0; } .ux4g-2xl-order-1 { order: 1; } .ux4g-2xl-order-2 { order: 2; } .ux4g-2xl-order-3 { order: 3; } .ux4g-2xl-order-4 { order: 4; } .ux4g-2xl-order-5 { order: 5; } } ``` ## Accessibility notes - Use the classes/tokens exactly as documented. Changing token values without a design review can break accessibility. - Ensure color contrast meets WCAG 2.1 AA. - Test responsive and RTL behavior where utility classes rely on logical properties.