Display Flexbox
We can use Display Flex and Flex Property's CSS
jds-d-flex flex-gap10
- A
- B
- C
- D
- E
- F
- G
- H
- A
- B
- C
- D
Display Flex properties CSS class
To inisiate Flex box add class jds-d-flex in root dome
Flex Vertical or Horizontal: flex-row flex-column flex-row-reverse flex-column-reverse flex-wrap flex-nowrap flex-wrap-reverse flex-fill
Flex Order: order-first order-1 order-2 order-4 order-6 order-7 order-8 order-9 order-10 order-last
Flex Wrap: flex-wrap flex-nowrap flex-wrap-reverse flex-fill
Flex Grow: flex-grow-0flex-grow-1 flex-shrink-0 flex-shrink-1
Justify Content : justify-content-start justify-content-end justify-content-center justify-content-between justify-content-around
Flex Item's Alignment: align-items-start align-items-end align-items-center align-items-baseline align-items-stretch
Flex Align Content align-content-start align-content-end align-content-center align-content-between align-content-around align-content-stretch align-self-auto align-self-start align-self-end align-self-center align-self-baseline align-self-stretch
We can use those class for responsive / all breakpoint
Small Viewport: flex-s-row flex-s-column flex-s-row-reverse flex-s-column-reverse ... flex-s-wrap-reverse flex-s-fill
Medium Sized Viewport: flex-m-row flex-m-column flex-m-row-reverse flex-m-column-reverse ... flex-m-wrap-reverse flex-m-fill
Larg Viewport: flex-l-row flex-l-column flex-l-row-reverse flex-l-column-reverse ... flex-l-wrap-reverse flex-l-fill
Flex Gap
flex-gap1, flex-gap5, flex-gap10, flex-gap15, flex-gap20, flex-gap25
Flex Basis
flex-basis-1, flex-basis-2, flex-basis-3, flex-basis-4, flex-basis-5
Some Example
Flex items column jds-d-flex, flex-column
- A
- B
- C
- D
- E
Flex reverse column jds-d-flex, flex-column-reverse
- A
- B
- C
- D
- E
Flex items growing row flex container jds-d-flex, flex-row, flex-gap10
- A
- B
- C
- D
- E
- F
- G
- H
Flex items growing row reverse flex container jds-d-flex, flex-row-reverse, flex-gap10
- A
- B
- C
- D
- E
- F
- G
- H
Flex items growing equalns fill full flex container jds-d-flex, flex-fill, flex-gap10
- A
- B
- C
- D
- E
- F
- G
- H
Flex items growing equalns fill full flex container jds-d-flex, flex-wrap, flex-gap10
- A
- B
- C
- D
- E
- F
- G
- H
Flex items growing equalns fill full flex container jds-d-flex, flex-nowrap, flex-gap10
- A
- B
- C
- D
- E
- F
Flex items number shrink 2 times in the flex container jds-d-flex, flex-nowrap, flex-gap10
-
A
Quidem, eius ratione expedita enim dignissimos quo temporibus illo exercitationem ipsam deserunt dolorum quasi hic sapiente suscipit ullam possimus qui sit mollitia.
-
flex-shrink-2
Quidem, eius ratione expedita enim dignissimos quo temporibus illo exercitationem ipsam deserunt dolorum quasi.
-
C
Quidem, eius ratione expedita enim dignissimos quo temporibus illo exercitationem ipsam deserunt dolorum quasi hic sapiente suscipit ullam possimus qui sit mollitia.
-
D
Quidem, eius ratione expedita enim dignissimos quo temporibus illo exercitationem ipsam deserunt dolorum quasi hic sapiente suscipit ullam possimus qui sit mollitia.
Flex items number grow 3 times in the flex container jds-d-flex, flex-grow-3, flex-nowrap, flex-gap10
-
A
Lorem ipsum dolor
-
flex-grow-3
-
C
Lorem ipsum dolor
-
D
Lorem ipsum dolor
-
E
Lorem ipsum dolor
Flex items going to end in the container jds-d-flex, justify-content-end, flex-gap10
-
A
-
B
-
C
-
D
-
E
Flex justify items space between CSS jds-d-flex, justify-content-between, flex-gap10
-
A
-
B
-
C
-
D
-
E
Flex justify items space around CSS jds-d-flex, justify-content-around, flex-gap10
-
A
-
B
-
C
-
D
-
E
Using CSS class:- jds-d-flex, justify-content-center, align-items-center
A
B
C
D
E
F
Using CSS class:- jds-d-flex, justify-content-end, align-items-end
A
B
C
D
E
F
Using CSS class:- jds-d-flex, justify-content-start, align-items-end
A
B
C
D
E
F
Using CSS class:- jds-d-flex, justify-content-end, align-items-start