Flexbox

These classes allows you to apply some flex attributes on any HTMLElement and with that you can *create some layouts directly in your HTML**.

Platform  
css
   â”‚    Support  
Chromium supported
Firefox supported
Safari supported
Edge supported
Since  2.0.0
   â”‚   
Olivier Bossel
Olivier Bossel
   â”‚   
beta

  Preview

Simple grid

Miss Raul Jaskolski
Nettie Friesen
Tasha Sauer
Mrs. Frankie Hettinger
 

Loading code example. Please wait...

Grow

Jody Volkman
Caleb Carroll
Daisy Tillman
 

Loading code example. Please wait...

Orders

Kenneth Tillman
Mr. Pam Cruickshank
Vera Kihn V
 

Loading code example. Please wait...

Aligns

Ginger Runolfsson
Orville Kuhlman
Dr. Jon Pfannerstill
Erick Runte
Irene Barton PhD
Ashley Ruecker
Miss Moses Anderson
 

Loading code example. Please wait...

  Install

  CSS Classes

  1. s-flex

    Apply a display "flex" on any HTMLElement

  2. s-flex:row

    Apply the flex direction to "row"

  3. s-flex:row-reverse

    Apply the flex direction to "row-reverse"

  4. s-flex:column

    Apply the flex direction to "column"

  5. s-flex:column-reverse

    Apply the flex direction to "column-reverse"

  6. s-flex:nowrap

    Apply the wrap property to "nowrap"

  7. s-flex:wrap

    Apply the wrap property to "wrap"

  8. s-flex:wrap-reverse

    Apply the wrap property to "wrap-reverse"

  9. s-flex:justify-start

    Apply the justify property to "start"

  10. s-flex:justify-flex-start

    Apply the justify property to "flex-start"

  11. s-flex:justify-end

    Apply the justify property to "end"

  12. s-flex:justify-flex-end

    Apply the justify property to "flex-end"

  13. s-flex:justify-center

    Apply the justify property to "center"

  14. s-flex:justify-space-between

    Apply the justify property to "space-between"

  15. s-flex:justify-space-around

    Apply the justify property to "space-around"

  16. s-flex:justify-space-evenly

    Apply the justify property to "space-evenly"

  17. s-flex:justify-stretch

    Apply the justify property to "stretch"

  18. s-flex:align-start

    Apply the align property to "start"

  19. s-flex:align-flex-start

    Apply the align property to "flex-start"

  20. s-flex:align-end

    Apply the align property to "end"

  21. s-flex:align-flex-end

    Apply the align property to "flex-end"

  22. s-flex:align-center

    Apply the align property to "center"

  23. s-flex:align-baseline

    Apply the align property to "baseline"

  24. s-flex-item:grow

    Apply the flex-grow property to "1"

  25. s-flex-item:shrink

    Apply the flex-shrink property to "1"

  26. s-flex-item:align-flex-start

    Align item to the start

  27. s-flex-item:align-flex-end

    Align item to the end

  28. s-flex-item:align-center

    Align item to the center

  29. s-flex-item:align-baseline

    Align item to the baseline

  30. s-flex-item:align-stretch

    Align item to the stretch

  31. s-flex-item:order-{0...20}

    Apply the order {0...20} to any flex item

  32. s-flex-item:grow-{0...20}

    Apply the grow {0...20} to any flex item

  33. s-flex-item:shrink-{0...20}

    Apply the shrink {0...20} to any flex item

Bugs
are not our friends...

Don't hesitate to declare an issue if something does not works as expected.

Declare my issue on Github Talk about it on Discord

The more we are,
the stronger we become.

Don't hesitate to tell some words to you friends about us. The goal is to became more and more each days to help each others...

Support us on Patreon! Share on Facebook! Make a tweet!

The more we are,
the stronger we become.

Don't be afraid to join us on Discord.

Join us on discord!

We love,
Open source!

All of our codebase can be found on Github. We hope that you may contribute to help us make our tools even better!

Discover our codebase!

Welcome on