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**.
Preview
Simple grid
Loading code example. Please wait...
Grow
Loading code example. Please wait...
Orders
Loading code example. Please wait...
Aligns
Dr. Jon Pfannerstill
Erick Runte
Irene Barton PhD
Ashley Ruecker
Dr. Jon Pfannerstill
Erick Runte
Irene Barton PhD
Ashley Ruecker
Loading code example. Please wait...
Install
CSS Classes
-
s-flex
Apply a display "flex" on any HTMLElement
-
s-flex:row
Apply the flex direction to "row"
-
s-flex:row-reverse
Apply the flex direction to "row-reverse"
-
s-flex:column
Apply the flex direction to "column"
-
s-flex:column-reverse
Apply the flex direction to "column-reverse"
-
s-flex:nowrap
Apply the wrap property to "nowrap"
-
s-flex:wrap
Apply the wrap property to "wrap"
-
s-flex:wrap-reverse
Apply the wrap property to "wrap-reverse"
-
s-flex:justify-start
Apply the justify property to "start"
-
s-flex:justify-flex-start
Apply the justify property to "flex-start"
-
s-flex:justify-end
Apply the justify property to "end"
-
s-flex:justify-flex-end
Apply the justify property to "flex-end"
-
s-flex:justify-center
Apply the justify property to "center"
-
s-flex:justify-space-between
Apply the justify property to "space-between"
-
s-flex:justify-space-around
Apply the justify property to "space-around"
-
s-flex:justify-space-evenly
Apply the justify property to "space-evenly"
-
s-flex:justify-stretch
Apply the justify property to "stretch"
-
s-flex:align-start
Apply the align property to "start"
-
s-flex:align-flex-start
Apply the align property to "flex-start"
-
s-flex:align-end
Apply the align property to "end"
-
s-flex:align-flex-end
Apply the align property to "flex-end"
-
s-flex:align-center
Apply the align property to "center"
-
s-flex:align-baseline
Apply the align property to "baseline"
-
s-flex-item:grow
Apply the flex-grow property to "1"
-
s-flex-item:shrink
Apply the flex-shrink property to "1"
-
s-flex-item:align-flex-start
Align item to the start
-
s-flex-item:align-flex-end
Align item to the end
-
s-flex-item:align-center
Align item to the center
-
s-flex-item:align-baseline
Align item to the baseline
-
s-flex-item:align-stretch
Align item to the stretch
-
s-flex-item:order-{0...20}
Apply the order {0...20} to any flex item
-
s-flex-item:grow-{0...20}
Apply the grow {0...20} to any flex item
-
s-flex-item:shrink-{0...20}
Apply the shrink {0...20} to any flex item