Wellcome CSS Framework version 3.2.2

Download

Flexbox

Flex Direction Column - flex-direction: column;

Grid System direction-column-{xs|sm|md|lg}

1
2
3

Flex Direction Column Reverse Output

1
2
3

Flex Direction Column Reverse - flex-direction: column-reverse;

Grid System column-reverse-{xs|sm|md|lg}

1
2
3

Flex Direction Column Reverse Output

1
2
3

Flex Direction Row - flex-direction: row;

Grid System direction-row-{xs|sm|md|lg}

1
2
3

Flex Direction Row Output

1
2
3

Flex Direction Row Reverse - flex-direction: row-reverse;

Grid System direction-row-reverse-{xs|sm|md|lg}

1
2
3

Flex Direction Row Reverse Output

1
2
3

Flex Wrap - flex-wrap: wrap;

Grid System wrap-{xs|sm|md|lg}

1
2
3
...

Flex Wrap Output

1
2
3
4
5
6
7
8
9
10

Flex No Wrap - flex-wrap: nowrap;

Grid System nowrap-{xs|sm|md|lg}

1
2
3
...

Flex No wrap Output

1
2
3
4
5
6
7
8
9
10

Flex Wrap Reverse - flex-wrap: wrap-reverse;

Grid System wrap-reverse-{xs|sm|md|lg}

1
2
3
...

Flex Wrap Reverse Output

1
2
3
4
5
6
7
8
9
10

Flex Row Wrap - flex-flow: row wrap;

Grid System row-wrap-{xs|sm|md|lg}

1
2
3
...

Flex Row Wrap Output

1
2
3
4
5
6
7
8
9
10

Flex Justify Center - justify-content: center;

Grid System justify-center-{xs|sm|md|lg}

1
2
3

Flex Justify Center Output

1
2
3

Flex Justify Start - justify-content: flex-start;

Grid System justify-start-{xs|sm|md|lg}

1
2
3

Flex Justify Start Output

1
2
3

Flex Justify End - justify-content: flex-end;

Grid System justify-end-{xs|sm|md|lg}

1
2
3

Flex Justify End Output

1
2
3

Justify Space Around - justify-content: space-around;

Grid System justify-space-around-{xs|sm|md|lg}

1
2
3

Justify Space Around Output

1
2
3

Justify Space Between - justify-content: space-between;

Grid System justify-space-between-{xs|sm|md|lg}

1
2
3

Justify Space Between Output

1
2
3

Align Items Center - align-items: center;

Grid System align-items-center-{xs|sm|md|lg}

1
2
3

Align Items Center Output

1
2
3

Align Items Start - align-items: flex-start;

Grid System align-items-start-{xs|sm|md|lg}

1
2
3

Align Items Start Output

1
2
3

Align Items End - align-items: flex-end;

Grid System align-items-end-{xs|sm|md|lg}

1
2
3

Align Items End Output

1
2
3

Align Items Stretch - align-items: stretch;

Grid System align-items-stretch-{xs|sm|md|lg}

1
2
3

Align Items Stretch Output

1
2
3

Align Items Baseline - align-items: baseline;

Grid System align-items-baseline-{xs|sm|md|lg}

1
2
3

Align Items Baseline Output

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text

Align Content Space Between - align-content: space-between;

Grid System align-content-space-between-{xs|sm|md|lg}

1
2
3
...

Align Content Space Between Output

1
2
3
4
5
6
7
8
9
10

Align Content Space Around - align-content: space-around;

Grid System .align-content-space-around-{xs|sm|md|lg}

1
2
3
...

Align Content Space Around Output

1
2
3
4
5
6
7
8
9
10

Align Content Stretch - align-content: stretch;

Grid System .align-content-stretch-{xs|sm|md|lg}

1
2
3
...

Align Content Stretch Output

1
2
3
4
5
6
7
8
9
10

Align Content Center - align-content: center;

Grid System .align-content-center-{xs|sm|md|lg}

1
2
3
...

Align Content Center Output

1
2
3
4
5
6
7
8
9
10

Align Content Start - align-content: flex-start;

Grid System .align-content-start-{xs|sm|md|lg}

1
2
3
...

Align Content Start Output

1
2
3
4
5
6
7
8
9
10

Align Content End - align-content: flex-end;

Grid System .align-content-end-{xs|sm|md|lg}

1
2
3
...

Align Content End Output

1
2
3
4
5
6
7
8
9
10

Align Self Stretch - align-self: stretch;

Grid System .align-self-stretch-{xs|sm|md|lg}

1
2
3
...

Align Self Stretch Output

1
2
3
4
5
6
7
8
9
10

Align Self Center - align-self: center;

Grid System .align-self-center-{xs|sm|md|lg}

1
2
3
...

Align Self Center Output

1
2
3
4

Align Self Start - align-self: flex-start;

Grid System .align-self-flex-start-{xs|sm|md|lg}

1
2
3
...

Align Self Start Output

1
2
3
4

Align Self End - align-self: flex-end;

Grid System .align-self-flex-end-{xs|sm|md|lg}

1
2
3
...

Align Self End Output

1
2
3
4

Align Self Baseline - align-self: baseline;

Grid System .align-self-baseline-{xs|sm|md|lg}

1
2
3
...

Align Self Baseline Output

1
2
3
4