Skip to content

Instantly share code, notes, and snippets.

@sidigi
Created April 18, 2019 16:20
Show Gist options
  • Save sidigi/f9c044ce22845495b9cf05c2e048bb99 to your computer and use it in GitHub Desktop.
Save sidigi/f9c044ce22845495b9cf05c2e048bb99 to your computer and use it in GitHub Desktop.
flexbox css helpers
/*
flexbox utility class used globally
*/
.flexbox {
display: flex;
}
.flexdir-row {
flex-direction: row;
}
.flexdir-rowrev {
flex-direction: row-reverse;
}
.flexdir-col {
flex-direction: column;
}
.flexdir-colrev {
flex-direction: column-reverse;
}
/* flex amount classes for children */
.flex-1 {
flex: 1;
}
.flex-2 {
flex: 2;
}
.flex-3 {
flex: 3;
}
.flex-4 {
flex: 4;
}
.flex-5 {
flex: 5;
}
.flex-6 {
flex: 6;
}
.flex-7 {
flex: 7;
}
.flex-8 {
flex: 8;
}
.flex-9 {
flex: 9;
}
.flex-10 {
flex: 10;
}
.flex-11 {
flex: 11;
}
.flex-12 {
flex: 12;
}
.flex-13 {
flex: 13;
}
.flex-14 {
flex: 14;
}
.flex-15 {
flex: 15;
}
.flex-16 {
flex: 16;
}
.flex-17 {
flex: 17;
}
.flex-18 {
flex: 18;
}
.flex-19 {
flex: 19;
}
.flex-20 {
flex: 20;
}
/* flex important override default with flex-i */
.flex-1-i {
flex: 1 !important;
}
.flex-2-i {
flex: 2 !important;
}
.flex-3-i {
flex: 3 !important;
}
.flex-4-i {
flex: 4 !important;
}
.flex-5-i {
flex: 5 !important;
}
.flex-6-i {
flex: 6 !important;
}
.flex-7-i {
flex: 7 !important;
}
.flex-8-i {
flex: 8 !important;
}
.flex-9-i {
flex: 9 !important;
}
.flex-10-i {
flex: 10 !important;
}
.flex-11-i {
flex: 11 !important;
}
.flex-12-i {
flex: 12 !important;
}
.flex-13-i {
flex: 13 !important;
}
.flex-14-i {
flex: 14 !important;
}
.flex-15-i {
flex: 15 !important;
}
.flex-16-i {
flex: 16 !important;
}
.flex-17-i {
flex: 17 !important;
}
.flex-18-i {
flex: 18 !important;
}
.flex-19-i {
flex: 19 !important;
}
.flex-20-i {
flex: 20 !important;
}
/* classes for wrapper element to align children */
.flex-center {
justify-content: center;
align-items: center;
}
.flexbox-space-center {
display: flex;
flex: 1;
justify-content: center;
align-items: center;
}
.flexbox-space-between {
display: flex;
flex: 1;
justify-content: space-between;
}
.flexbox-space-evenly {
display: flex;
flex: 1;
justify-content: space-evenly;
}
.flexbox-space-around {
display: flex;
flex: 1;
justify-content: space-around;
}
/* align classes */
.flex-align-baseline {
align-items: baseline;
}
.flex-align-center {
align-items: center;
}
.flex-align-flexend {
align-items: flex-end;
}
.flex-align-flexstart {
align-items: flex-start;
}
.flex-align-baseline.align-self {
align-self: baseline;
}
.flex-align-center.align-self {
align-self: center;
}
.flex-align-flexend.align-self {
align-self: flex-end;
}
.flex-align-flexstart.align-self {
align-self: flex-start;
}
.flex-justify-start {
justify-content: flex-start;
}
.flex-justify-center {
justify-content: center;
}
.flex-justify-end {
justify-content: flex-end
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-no-wrap {
flex-wrap: nowrap;
}
.flex-wraprev {
flex-wrap: wrap-reverse;
}
/* FLEXGAP CLASSES */
.flexgap-1 > *{
margin: 0 .25rem;
}
.flexgap-1 > *:first-child {
margin: 0 .25rem 0 0;
}
.flexgap-1 > *:last-child{
margin: 0 0 0 .25rem;
}
.flexgap-2 > *{
margin: 0 .5rem;
}
.flexgap-2 > *:first-child {
margin: 0 .5rem 0 0;
}
.flexgap-2 > *:last-child{
margin: 0 0 0 .5rem;
}
.flexgap-3 > *{
margin: 0 .75rem;
}
.flexgap-3 > *:first-child {
margin: 0 .75rem 0 0;
}
.flexgap-3 > *:last-child{
margin: 0 0 0 .75rem;
}
.flexgap-4 > *{
margin: 0 1rem;
}
.flexgap-4 > *:first-child {
margin: 0 1rem 0 0;
}
.flexgap-4 > *:last-child{
margin: 0 0 0 1rem;
}
.flexgap-5 > *{
margin: 0 1.5rem;
}
.flexgap-5 > *:first-child {
margin: 0 1.5rem 0 0;
}
.flexgap-5 > *:last-child{
margin: 0 0 0 1.5rem;
}
/* flex transition classes
these classes are for transitioning the flex css property. each class increases the duration by 100ms until reaching a 1s max at the fxt-10 class.
fxt- is the transition class prefix and the following # number represents the duration.
*/
.fxt-1 {
transition: flex 0.1s ease-in-out;
}
.fxt-2 {
transition: flex 0.2s ease-in-out;
}
.fxt-3 {
transition: flex 0.3s ease-in-out;
}
.fxt-4 {
transition: flex 0.4s ease-in-out;
}
.fxt-5 {
transition: flex 0.5s ease-in-out;
}
.fxt-6 {
transition: flex 0.6s ease-in-out;
}
.fxt-7 {
transition: flex 0.7s ease-in-out;
}
.fxt-8 {
transition: flex 0.8s ease-in-out;
}
.fxt-9 {
transition: flex 0.9s ease-in-out;
}
.fxt-10 {
transition: flex 1s ease-in-out;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment