Style-reference for Style-Library 2.0

Here we will give a short overview of all the new features of the style libary

CSS Helper Classes

If you don't want to use the CSS variables and just add classes to your html to apply the new stylings you can use the following helper classes.

This is a Work in progress, For now I will include a helpers.css file in the cdn but this approach is not ideal.. It contains +- 1600 lines of css filled with one-purpose classes, over half of which might never be used!

I will make each section available through sass so each project can build what it needs. but that does not resolve the problem of the un-used classes in the final css output.

Ideally when using these classes, every project should implement PurgeCSS in their build-step to get rid of these un-used classes, but that is an issue to tackle later.

Colors

To Use these color helper classes please include the helpers/colors.scss file

You can ommit "-regular" for the regular colors

Primary Colors

Success Colors

Warning and Highlight Colors

you can replace "warning" with "highlight" they are the same colors!

Danger Colors

Info Colors

Neutral Colors

Extra background Colors

class="bg-[value]"
white
black
default
transparent

Extra text Colors

class="txt-[value]"
white
black
default

Box-shadows

To Use these box shadow helper classes please include the helpers/shadows.scss file

shadows

class="bxsh-[value]"

Typography

To Use these typography helper classes please include the helpers/text.scss file

font-family

class="txt-fam-[value]"

[base: Ubuntu]: The quick brown fox jumps over the lazy dog

[alt: Source Code Pro]: The quick brown fox jumps over the lazy dog

font-size

class="txt-size-[value]"

[small]: The quick brown fox jumps over the lazy dog

[base]: The quick brown fox jumps over the lazy dog

[large]: The quick brown fox jumps over the lazy dog

[xl]: The quick brown fox jumps over the lazy dog

[2xl]: The quick brown fox jumps over the lazy dog

font-weight

class="txt-[value]"

[normal]: The quick brown fox jumps over the lazy dog

[bold]: The quick brown fox jumps over the lazy dog

[light]: The quick brown fox jumps over the lazy dog

Spacing

To Use these spacing helper classes please include the helpers/spacings.scss file

class="padding-[value]" class="padding-[ver-value]-[hor-value]" class="margin-[value]" class="margin-[ver-value]-[hor-value]"

Borders

To Use these border helper classes please include the helpers/borders.scss file

border radius

class="borad-[value]"

border size

class="bosz-[value]"

border color

class="bocol-[color]-[shade]"

Z-index

To Use these z-index helper classes please include the helpers/indexes.scss file

class="zi-[value]"

Navigation

Fractions

Supported denominators: 1, 2, 3, 4, 5, 6 and 12

class="fract-[width/height]-[numerator]-[denominator]" 
<div class="fract-width-1-1 fractions set">
    <div class="fract-width-1-2">
        <div class="fract-height-1-1">1/2</div>
    </div>
    <div class="fract-width-1-2">
        <div class="fract-height-1-1">1/2</div>
    </div>
</div>
1/1
1/2
1/2
2/3
1/3
3/4
1/4
2/5
3/5
1/6
'
5/6
10/12
2/12

CSS-grid

To Use these grid helper classes please include the helpers/grid.scss file

Grid

Sets the element as a grid container.

<div class="grid">
    <!-- Grid items here -->
</div>

Grid-item

Sets the elements box-sizing to border-box so the dimensions don't overflow

<div class="grid">
    <div class="grid-item defaultCell">Item 1</div>
</div>
Item 1

Grid-cols

Defines the number of columns in the grid container.

class="grid-cols-[1 - 12]" 
<div class="grid grid-cols-3 gap-small">
    <div class="grid-item defaultCell">Item 1</div>
    <div class="grid-item defaultCell">Item 2</div>
    <div class="grid-item defaultCell">Item 3</div>
</div>
Item 1
Item 2
Item 3

Grid-rows

Defines the number of rows in the grid container.

class="grid-rows-[1 - 12]" 
<div class="grid grid-rows-3 gap-small">
    <div class="grid-item defaultCell">Item 1</div>
    <div class="grid-item defaultCell">Item 2</div>
    <div class="grid-item defaultCell">Item 3</div>
</div>
Item 1
Item 2
Item 3

Col-start

Specifies the starting grid line for a grid item in terms of columns.

class="col-start-[1 - 12]" 
<div class="grid grid-cols-3 gap-small">
    <div class="grid-item col-start-2 defaultCell">Item 1</div>
</div>
Item 1

Col-end

Specifies the ending grid line for a grid item in terms of columns.

class="col-end-[1 - 12]" 
<div class="grid grid-cols-3 gap-small">
    <div class="grid-item col-end-3 defaultCell">Item 1</div>
</div>
Item 1

Col-span

Spans a grid item across a specified number of columns.

class="col-span-[1 - 12]" 
<div class="grid grid-cols-3 gap-small">
    <div class="grid-item col-span-2 defaultCell">Item 1</div>
    <div class="grid-item defaultCell">Item 2</div>
</div>
Item 1
Item 2

Grid-gap

Defines the number of columns in the grid container.

class="gap-[any-spacing-value]" 
<div class="grid grid-cols-3 gap-base">
    <div class="grid-item defaultCell">Item 1</div>
    <div class="grid-item defaultCell">Item 2</div>
    <div class="grid-item defaultCell">Item 3</div>
    <div class="grid-item defaultCell">Item 4</div>
    <div class="grid-item defaultCell">Item 5</div>
    <div class="grid-item defaultCell">Item 6</div>
</div>
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Col-gap

Sets the gap between columns in the grid.

class="col-gap-[any-spacing-value]" 
<div class="grid grid-cols-3 col-gap-large gap-small">
    <div class="grid-item defaultCell">Item 1</div>
    <div class="grid-item defaultCell">Item 2</div>
    <div class="grid-item defaultCell">Item 3</div>
    <div class="grid-item defaultCell">Item 4</div>
    <div class="grid-item defaultCell">Item 5</div>
    <div class="grid-item defaultCell">Item 6</div>
</div>
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Row-gap

Sets the gap between rows in the grid.

class="row-gap-[any-spacing-value]" 
<div class="grid grid-cols-3 row-gap-2xl gap-small">
    <div class="grid-item defaultCell">Item 1</div>
    <div class="grid-item defaultCell">Item 2</div>
    <div class="grid-item defaultCell">Item 3</div>
    <div class="grid-item defaultCell">Item 4</div>
    <div class="grid-item defaultCell">Item 5</div>
    <div class="grid-item defaultCell">Item 6</div>
</div>
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Gird alignments

Justify-items

Aligns grid items along the row axis within their grid area.

class="justify-items-start" 
<div class="grid justify-items-start grid-cols-3 gap-small containerWidth">
    <div class="grid-item fixedCell">Item 1</div>
    <div class="grid-item fixedCell">Item 2</div>
    <div class="grid-item fixedCell">Item 3</div>
</div>
Item 1
Item 2
Item 3
class="justify-items-end" 
<div class="grid justify-items-end grid-cols-3 gap-small containerWidth">
    <div class="grid-item fixedCell">Item 1</div>
    <div class="grid-item fixedCell">Item 2</div>
    <div class="grid-item fixedCell">Item 3</div>
</div>
Item 1
Item 2
Item 3
class="justify-items-center" 
<div class="grid justify-items-center grid-cols-3 gap-small containerWidth">
    <div class="grid-item fixedCell">Item 1</div>
    <div class="grid-item fixedCell">Item 2</div>
    <div class="grid-item fixedCell">Item 3</div>
</div>
Item 1
Item 2
Item 3
class="justify-items-stretch" 
<div class="grid justify-items-stretch grid-cols-3 gap-small containerWidth">
    <div class="grid-item defaultCell">Item 1</div>
    <div class="grid-item defaultCell">Item 2</div>
    <div class="grid-item defaultCell">Item 3</div>
</div>
Item 1
Item 2
Item 3

Items

Aligns grid items along the column axis within their grid area.

class="items-start" 
<div class="grid items-start grid-cols-3 gap-small containerWidth containerHeight">
    <div class="grid-item fixedCell">Item 1</div>
    <div class="grid-item fixedCell">Item 2</div>
    <div class="grid-item fixedCell">Item 3</div>
</div>
Item 1
Item 2
Item 3
class="items-end" 
<div class="grid items-end grid-cols-3 gap-small containerWidth containerHeight">
    <div class="grid-item fixedCell">Item 1</div>
    <div class="grid-item fixedCell">Item 2</div>
    <div class="grid-item fixedCell">Item 3</div>
</div>
Item 1
Item 2
Item 3
class="items-center" 
<div class="grid items-center grid-cols-3 gap-small containerWidth containerHeight">
    <div class="grid-item fixedCell">Item 1</div>
    <div class="grid-item fixedCell">Item 2</div>
    <div class="grid-item fixedCell">Item 3</div>
</div>
Item 1
Item 2
Item 3
class="items-stretch" 
<div class="grid items-stretch grid-cols-3 gap-small containerWidth containerHeight">
    <div class="grid-item defaultCell">Item 1</div>
    <div class="grid-item defaultCell">Item 2</div>
    <div class="grid-item defaultCell">Item 3</div>
</div>
Item 1
Item 2
Item 3

Justify-self

Aligns a single grid item along the row axis within its grid area.

class="justify-self-start" class="justify-self-center" class="justify-self-end" 
<div class="grid grid-cols-3 gap-small containerWidth">
    <div class="grid-item justify-self-start defaultCell">start</div>
    <div class="grid-item justify-self-center defaultCell">center</div>
    <div class="grid-item justify-self-end defaultCell">end</div>
</div>
start
center
end
class="justify-self-stretch" 
<div class="grid grid-cols-3 gap-small containerWidth">
    <div class="grid-item defaultCell">Item 1</div>
    <div class="grid-item justify-self-stretch defaultCell">Item 2</div>
    <div class="grid-item defaultCell">Item 3</div>
</div>
Item 1
Item 2
Item 3

Self

Aligns a single grid item along the column axis within its grid area.

class="self-start"
class="self-center"
class="self-end" 
<div class="grid grid-cols-3 gap-small containerWidth containerHeight">
    <div class="grid-item self-start defaultCell">start</div>
    <div class="grid-item self-center defaultCell">center</div>
    <div class="grid-item self-end defaultCell">end</div>
</div>
start
center
end
class="self-stretch" 
<div class="grid grid-cols-3 gap-small containerWidth containerHeight">
    <div class="grid-item defaultCell">Item 1</div>
    <div class="grid-item self-stretch defaultCell">Item 2</div>
    <div class="grid-item defaultCell">Item 3</div>
</div>
Item 1
Item 2
Item 3

Grid Auto Flow

Grid-flow-row

Lays out grid items by row. the row will be filled first

class="grid-flow-row" 
<div class="grid grid-cols-3 grid-rows-2 grid-flow-row gap-small">
<div class="grid-item fixedCell">Item 1</div>
<div class="grid-item fixedCell">Item 2</div>
<div class="grid-item fixedCell">Item 3</div>
<div class="grid-item fixedCell">Item 4</div>
</div>
Item 1
Item 2
Item 3
Item 4

Grid-flow-column

Lays out grid items by column. the column will be filled first

class="grid-flow-column" 
<div class="grid grid-cols-3 grid-rows-3 grid-flow-column gap-small">
<div class="grid-item fixedCell">Item 1</div>
<div class="grid-item fixedCell">Item 2</div>
<div class="grid-item fixedCell">Item 3</div>
<div class="grid-item fixedCell">Item 4</div>
</div>
Item 1
Item 2
Item 3
Item 4

Flexbox

To Use these flex helper classes please include the helpers/flex.scss file

Flex containers

Set the flexor inline-flexclass on an element to manipulate its children as flex-box items

<div class="flex">
    <!-- Flex-items-->
</div>

Flex-directions

The direction the flex items will get rendered

class="flex-row" 
<div class="flex flex-row">
    <div class="defaultCell">Item 1</div>
    <div class="defaultCell">Item 2</div>
    <div class="defaultCell">Item 3</div>
</div>
Item 1
Item 2
Item 3
class="flex-column" 
<div class="flex flex-column">
    <div class="defaultCell">Item 1</div>
    <div class="defaultCell">Item 2</div>
    <div class="defaultCell">Item 3</div>
</div>
Item 1
Item 2
Item 3
class="flex-row-reverse" 
<div class="flex flex-row-reverse">
    <div class="defaultCell">Item 1</div>
    <div class="defaultCell">Item 2</div>
    <div class="defaultCell">Item 3</div>
</div>
Item 1
Item 2
Item 3
class="flex-column-reverse" 
<div class="flex flex-column-reverse">
    <div class="defaultCell">Item 1</div>
    <div class="defaultCell">Item 2</div>
    <div class="defaultCell">Item 3</div>
</div>
Item 1
Item 2
Item 3

Flex-wraps

Determines whether items should be forced onta a single line, or wrap multiple

class="flex-nowrap" 
<div class="flex flex-nowrap containerWidth">
    <div class="fixedCell">Item 1</div>
    <div class="fixedCell">Item 2</div>
    <div class="fixedCell">Item 3</div>
    <div class="fixedCell">Item 4</div>
    <div class="fixedCell">Item 5</div>
    <div class="fixedCell">Item 6</div>
    <div class="fixedCell">Item 7</div>
    <div class="fixedCell">Item 8</div>
    <div class="fixedCell">Item 10</div>
    <div class="fixedCell">Item 11</div>
    <div class="fixedCell">Item 12</div>
    <div class="fixedCell">Item 13</div>
</div>
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
class="flex-wrap" 
<div class="flex flex-wrap containerWidth">
    <div class="fixedCell">Item 1</div>
    <div class="fixedCell">Item 2</div>
    <div class="fixedCell">Item 3</div>
    <div class="fixedCell">Item 4</div>
    <div class="fixedCell">Item 5</div>
    <div class="fixedCell">Item 6</div>
    <div class="fixedCell">Item 7</div>
    <div class="fixedCell">Item 8</div>
    <div class="fixedCell">Item 10</div>
    <div class="fixedCell">Item 11</div>
    <div class="fixedCell">Item 12</div>
    <div class="fixedCell">Item 13</div>
</div>
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
class="flex-wrap-reverse" 
<div class="flex flex-wrap -reverse containerWidth">
    <div class="fixedCell">Item 1</div>
    <div class="fixedCell">Item 2</div>
    <div class="fixedCell">Item 3</div>
    <div class="fixedCell">Item 4</div>
    <div class="fixedCell">Item 5</div>
    <div class="fixedCell">Item 6</div>
    <div class="fixedCell">Item 7</div>
    <div class="fixedCell">Item 8</div>
    <div class="fixedCell">Item 10</div>
    <div class="fixedCell">Item 11</div>
    <div class="fixedCell">Item 12</div>
    <div class="fixedCell">Item 13</div>
</div>
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13

Flex-directions

The direction the flex items will get rendered

class="flex-row" 
<div class="flex flex-row">
    <div class="defaultCell">Item 1</div>
    <div class="defaultCell">Item 2</div>
    <div class="defaultCell">Item 3</div>
</div>
Item 1
Item 2
Item 3
class="flex-column" 
<div class="flex flex-column">
    <div class="defaultCell">Item 1</div>
    <div class="defaultCell">Item 2</div>
    <div class="defaultCell">Item 3</div>
</div>
Item 1
Item 2
Item 3
class="flex-row-reverse" 
<div class="flex flex-row-reverse">
    <div class="defaultCell">Item 1</div>
    <div class="defaultCell">Item 2</div>
    <div class="defaultCell">Item 3</div>
</div>
Item 1
Item 2
Item 3
class="flex-column-reverse" 
<div class="flex flex-column-reverse">
    <div class="defaultCell">Item 1</div>
    <div class="defaultCell">Item 2</div>
    <div class="defaultCell">Item 3</div>
</div>
Item 1
Item 2
Item 3

Justify content

Determines the spacing between the items and where they will be positioned

class="justify-flex-start" 
<div class="flex justify-flex-start containerWidth">
    <div class="fixedCell">Item 1</div>
    <div class="fixedCell">Item 2</div>
    <div class="fixedCell">Item 3</div>
    <div class="fixedCell">Item 4</div>
    <div class="fixedCell">Item 5</div>
    <div class="fixedCell">Item 6</div>
</div>
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
class="justify-flex-end" 
<div class="flex justify-flex-end containerWidth">
    <div class="fixedCell">Item 1</div>
    <div class="fixedCell">Item 2</div>
    <div class="fixedCell">Item 3</div>
    <div class="fixedCell">Item 4</div>
    <div class="fixedCell">Item 5</div>
    <div class="fixedCell">Item 6</div>
</div>
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
class="justify-center" 
<div class="flex justify-center containerWidth">
    <div class="fixedCell">Item 1</div>
    <div class="fixedCell">Item 2</div>
    <div class="fixedCell">Item 3</div>
    <div class="fixedCell">Item 4</div>
    <div class="fixedCell">Item 5</div>
    <div class="fixedCell">Item 6</div>
</div>
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
class="justify-space-between" 
<div class="flex justify-space-between containerWidth">
    <div class="fixedCell">Item 1</div>
    <div class="fixedCell">Item 2</div>
    <div class="fixedCell">Item 3</div>
    <div class="fixedCell">Item 4</div>
    <div class="fixedCell">Item 5</div>
    <div class="fixedCell">Item 6</div>
</div>
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
class="justify-space-around" 
<div class="flex justify-space-around containerWidth">
    <div class="fixedCell">Item 1</div>
    <div class="fixedCell">Item 2</div>
    <div class="fixedCell">Item 3</div>
    <div class="fixedCell">Item 4</div>
    <div class="fixedCell">Item 5</div>
    <div class="fixedCell">Item 6</div>
</div>
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
class="justify-space-evenly" 
<div class="flex justify-space-evenly containerWidth">
    <div class="fixedCell">Item 1</div>
    <div class="fixedCell">Item 2</div>
    <div class="fixedCell">Item 3</div>
    <div class="fixedCell">Item 4</div>
    <div class="fixedCell">Item 5</div>
    <div class="fixedCell">Item 6</div>
</div>
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Align items

determins how items are placed relative to each other within the container

class="items.stretch" 
<div class="flex items.stretch containerWidth justify-space-evenly">
    <div style="font-size: 1rem" class="defaultCell">Item 1</div>
    <div style="font-size: 2rem" class="defaultCell">Item 2</div>
    <div style="font-size: 3rem" class="defaultCell">Item 3</div>
</div>
Item 1
Item 2
Item 3
class="items-flex-start" 
<div class="flex items-flex-start containerWidth justify-space-evenly">
    <div style="font-size: 1rem" class="defaultCell">Item 1</div>
    <div style="font-size: 2rem" class="defaultCell">Item 2</div>
    <div style="font-size: 3rem" class="defaultCell">Item 3</div>
</div>
Item 1
Item 2
Item 3
class="items-flex-end" 
<div class="flex items-flex-end containerWidth justify-space-evenly">
    <div style="font-size: 1rem" class="defaultCell">Item 1</div>
    <div style="font-size: 2rem" class="defaultCell">Item 2</div>
    <div style="font-size: 3rem" class="defaultCell">Item 3</div>
</div>
Item 1
Item 2
Item 3
class="items-center" 
<div class="flex items-center containerWidth justify-space-evenly">
    <div style="font-size: 1rem" class="defaultCell">Item 1</div>
    <div style="font-size: 2rem" class="defaultCell">Item 2</div>
    <div style="font-size: 3rem" class="defaultCell">Item 3</div>
</div>
Item 1
Item 2
Item 3
class="items-baseline" 
<div class="flex items-baseline containerWidth justify-space-evenly">
    <div style="font-size: 1rem" class="defaultCell">Item 1</div>
    <div style="font-size: 2rem" class="defaultCell">Item 2</div>
    <div style="font-size: 3rem" class="defaultCell">Item 3</div>
</div>
Item 1
Item 2
Item 3

Align content

Aligns the flex lines within a multi-line flex container along the cross axis, distributing the extra space in the container.

class="content-stretch" 
<div class="flex content-stretch flex-wrap">
    <div class="defaultCell flex-grow-1">Item 1</div>
    <div class="defaultCell flex-grow-1">Item 2</div>
    <div class="defaultCell flex-grow-1">Item 3</div>
    <div class="defaultCell flex-grow-1">Item 4</div>
    <div class="defaultCell flex-grow-1">Item 5</div>
    <div class="defaultCell flex-grow-1">Item 6</div>
</div>
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Align content

Aligns the flex lines within a multi-line flex container along the cross axis, distributing the extra space in the container.

class="content-flex-start" 
<div class="flex content-flex-start flex-wrap">
    <div class="defaultCell flex-grow-1">Item 1</div>
    <div class="defaultCell flex-grow-1">Item 2</div>
    <div class="defaultCell flex-grow-1">Item 3</div>
    <div class="defaultCell flex-grow-1">Item 4</div>
    <div class="defaultCell flex-grow-1">Item 5</div>
    <div class="defaultCell flex-grow-1">Item 6</div>
</div>
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Align content

Aligns the flex lines within a multi-line flex container along the cross axis, distributing the extra space in the container.

class="content-flex-end" 
<div class="flex content-flex-end flex-wrap">
    <div class="defaultCell flex-grow-1">Item 1</div>
    <div class="defaultCell flex-grow-1">Item 2</div>
    <div class="defaultCell flex-grow-1">Item 3</div>
    <div class="defaultCell flex-grow-1">Item 4</div>
    <div class="defaultCell flex-grow-1">Item 5</div>
    <div class="defaultCell flex-grow-1">Item 6</div>
</div>
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
class="content-center" 
<div class="flex content-center flex-wrap">
    <div class="defaultCell flex-grow-1">Item 1</div>
    <div class="defaultCell flex-grow-1">Item 2</div>
    <div class="defaultCell flex-grow-1">Item 3</div>
    <div class="defaultCell flex-grow-1">Item 4</div>
    <div class="defaultCell flex-grow-1">Item 5</div>
    <div class="defaultCell flex-grow-1">Item 6</div>
</div>
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
class="content-space-between" 
<div class="flex content-space-between flex-wrap">
    <div class="defaultCell flex-grow-1">Item 1</div>
    <div class="defaultCell flex-grow-1">Item 2</div>
    <div class="defaultCell flex-grow-1">Item 3</div>
    <div class="defaultCell flex-grow-1">Item 4</div>
    <div class="defaultCell flex-grow-1">Item 5</div>
    <div class="defaultCell flex-grow-1">Item 6</div>
</div>
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
class="content-space-around" 
<div class="flex content-space-around flex-wrap">
    <div class="defaultCell flex-grow-1">Item 1</div>
    <div class="defaultCell flex-grow-1">Item 2</div>
    <div class="defaultCell flex-grow-1">Item 3</div>
    <div class="defaultCell flex-grow-1">Item 4</div>
    <div class="defaultCell flex-grow-1">Item 5</div>
    <div class="defaultCell flex-grow-1">Item 6</div>
</div>
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

flex-items

the following classes need to be put on the flex-items themselves not the container, they determine, the items position and whether or not they can grow or shrink.

class="order-children" on container

using the "order-children" class on the flex container sets the default order of all children to 2 instead of 0

class="order-[value 1 - 12]"

this way we can easily set 1 specific element in the front without having to specify an order class for each sibling.

Otherwise order-1 would just be put right before order-3 and behind all the default order-0's

<div class="flex order-children justify-space-between containerWidth">
    <div class="defaultCell order-3">Item 1</div>
    <div class="defaultCell">Item 2</div>
    <div class="defaultCell order-4">Item 3</div>
    <div class="defaultCell order-1">Item 4</div>
    <div class="defaultCell">Item 5</div>
    <div class="defaultCell">Item 6</div>
</div>
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Attention:Because flex-basis is too variable of a value to provide many classes for i suggest setting it with an inline-style instead

style="flex-basis: [value in px or rem]"

grow and shrink rates go from 0 to 10, 0 means it won't grow or shrink

class="flex-grow-[grow-rate]" class="flex-shrink-[shrink-rate]" 
<div class="flex containerWidth ">
    <div style="flex-basis: 100px;" class="defaultCell flex-shrink-3">Item 1</div>
    <div style="flex-basis: 100px;" class="defaultCell flex-grow-1">Item 2</div>
    <div style="flex-basis: 200px;" class="defaultCell flex-grow-0 flex-shrink-0">Item 3</div>
    <div style="flex-basis: 100px;" class="defaultCell flex-grow-2">Item 4</div>
    <div style="flex-basis: 100px;" class="defaultCell">Item 5</div>
    <div style="flex-basis: 100px;" class="defaultCell flex-grow-3">Item 6</div>
</div>
Item 1
grow-1
Item 3
grow-2
Item 5
grow-3

Align Self

Determines the alignment of individual items within a flex container along the cross axis

class="self-auto" class="self-flex-start" class="self-flex-end" class="self-center" class="self-baseline" class="self-stretch" 
<div class="flex justify-space-between containerWidth containerHeight">
                <div class="fixedCell self-auto">auto</div>
                <div class="fixedCell self-flex-start">flex-start</div>
                <div class="fixedCell self-flex-end">flex-end</div>
                <div class="fixedCell self-center">center</div>
                <div class="fixedCell self-baseline">baseline</div>
                <div class="fixedCell txt-size-2xl self-baseline">baseline</div>
                <div class="fixedCell self-stretch">stretch</div>
            </div>
auto
flex-start
flex-end
center
baseline
baseline
stretch