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

A
B
C
D
E
F