Created
June 18, 2021 18:51
-
-
Save karks88/ab79d6d7b3abe4bcb3170fb5418ce995 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Flexbox Columns */ | |
.flex-columns { | |
display: -ms-flexbox; | |
display: -webkit-flex; | |
display: flex; | |
-webkit-flex-direction: row; | |
-ms-flex-direction: row; | |
flex-direction: row; | |
-webkit-flex-wrap: nowrap; | |
-ms-flex-wrap: nowrap; | |
flex-wrap: nowrap; | |
} | |
.justify-flexstart { | |
-webkit-justify-content: flex-start; | |
-ms-flex-pack: start; | |
justify-content: flex-start; | |
} | |
.justify-center { | |
-webkit-justify-content: center; | |
-ms-flex-pack: center; | |
justify-content: center; | |
} | |
.justify-spacebetween { | |
-webkit-justify-content: space-between; | |
-ms-flex-pack: justify; | |
justify-content: space-between; | |
} | |
.align-items-flexstart { | |
-webkit-align-items: flex-start; | |
-ms-flex-align: start; | |
align-items: flex-start; | |
} | |
.align-items-center { | |
-webkit-align-items: center; | |
-ms-flex-align: center; | |
align-items: center; | |
} | |
.align-items-stretch { | |
-webkit-align-items: stretch; | |
-ms-flex-align: stretch; | |
align-items: stretch; | |
} | |
/* align-content is for multiline columns */ | |
.align-content-flexstart { | |
-webkit-align-content: flex-start; | |
-ms-flex-line-pack: start; | |
align-content: flex-start; | |
} | |
.align-content-center { | |
-webkit-align-content: center; | |
-ms-flex-line-pack: center; | |
align-content: center; | |
} | |
.align-content-spacebetween { | |
-webkit-align-content: space-between; | |
-ms-flex-line-pack: justify; | |
align-content: space-between; | |
} | |
/* Individual Column Width */ | |
.flexfallback { } /* ALWAYS include this in each column, plus an individual size below. */ | |
.flexcol-auto { | |
-webkit-order: 0; | |
-ms-flex-order: 0; | |
order: 0; | |
-webkit-flex: 0 1 auto; | |
-ms-flex: 0 1 auto; | |
flex: 0 1 auto; | |
-webkit-align-self: auto; | |
-ms-flex-item-align: auto; | |
align-self: auto; | |
width: auto; | |
} | |
.flexcol-half { | |
-webkit-order: 0; | |
-ms-flex-order: 0; | |
order: 0; | |
-webkit-flex: 0 1 auto; | |
-ms-flex: 0 1 auto; | |
flex: 0 1 auto; | |
-webkit-align-self: auto; | |
-ms-flex-item-align: auto; | |
align-self: auto; | |
width: 48%; | |
} | |
.flexcol-third { | |
-webkit-order: 0; | |
-ms-flex-order: 0; | |
order: 0; | |
-webkit-flex: 0 1 auto; | |
-ms-flex: 0 1 auto; | |
flex: 0 1 auto; | |
-webkit-align-self: auto; | |
-ms-flex-item-align: auto; | |
align-self: auto; | |
width: 31%; | |
} | |
.flexcol-two-thirds { | |
-webkit-order: 0; | |
-ms-flex-order: 0; | |
order: 0; | |
-webkit-flex: 0 1 auto; | |
-ms-flex: 0 1 auto; | |
flex: 0 1 auto; | |
-webkit-align-self: auto; | |
-ms-flex-item-align: auto; | |
align-self: auto; | |
width: 66%; | |
} | |
.flexcol-fourth { | |
-webkit-order: 0; | |
-ms-flex-order: 0; | |
order: 0; | |
-webkit-flex: 0 1 auto; | |
-ms-flex: 0 1 auto; | |
flex: 0 1 auto; | |
-webkit-align-self: auto; | |
-ms-flex-item-align: auto; | |
align-self: auto; | |
width: 23%; | |
} | |
.flexcol-three-fourths { | |
-webkit-order: 0; | |
-ms-flex-order: 0; | |
order: 0; | |
-webkit-flex: 0 1 auto; | |
-ms-flex: 0 1 auto; | |
flex: 0 1 auto; | |
-webkit-align-self: auto; | |
-ms-flex-item-align: auto; | |
align-self: auto; | |
width: 75%; | |
} | |
.flexcol-fifth { | |
-webkit-order: 0; | |
-ms-flex-order: 0; | |
order: 0; | |
-webkit-flex: 0 1 auto; | |
-ms-flex: 0 1 auto; | |
flex: 0 1 auto; | |
-webkit-align-self: auto; | |
-ms-flex-item-align: auto; | |
align-self: auto; | |
width: 18%; | |
} | |
/* No Flexbox? No Problem. */ | |
.no-flexbox .flex-columns { | |
display: block; | |
clear: both; | |
} | |
.no-flexbox .flexfallback { | |
width:100%; margin-right:4%; position:relative; float:left; | |
} | |
.no-flexbox .flexfallback:last-child { | |
clear:right; margin-right:0; | |
} | |
.no-flexbox .flexcol-auto { | |
display: inline-block; | |
width: auto; | |
} | |
.no-flexbox .flexcol-half { | |
display: block; | |
width: 48%; | |
} | |
.no-flexbox .flexcol-third { | |
display: block; | |
width: 30.66%; | |
} | |
/* Revised Version that Adjusts for Visual Enhancements | |
.no-flexbox .flexcol-third { | |
display: block; | |
width: 28.66%; | |
} */ | |
.no-flexbox .flexcol-two-thirds { | |
display: block; | |
width: 65.33%; | |
} | |
.no-flexbox .flexcol-fourth { | |
display: block; | |
width: 22%; | |
} | |
.no-flexbox .flexcol-three-fourths { | |
display: block; | |
width: 74%; | |
} | |
.no-flexbox .flexcol-fifth { | |
display: block; | |
width: 16.8%; | |
} | |
@media screen and (min-width: 320px) and (max-width: 768px) { | |
/* Flexbox Columns */ | |
.flex-columns { | |
display: -ms-flexbox; | |
display: -webkit-flex; | |
display: flex; | |
-webkit-flex-direction: row; | |
-ms-flex-direction: row; | |
flex-direction: row; | |
-webkit-flex-wrap: wrap; | |
-ms-flex-wrap: wrap; | |
flex-wrap: wrap; | |
} | |
/* Individual Column Width */ | |
.flexcol-auto { | |
-webkit-order: 0; | |
-ms-flex-order: 0; | |
order: 0; | |
-webkit-flex: 0 1 auto; | |
-ms-flex: 0 1 auto; | |
flex: 0 1 auto; | |
-webkit-align-self: auto; | |
-ms-flex-item-align: auto; | |
align-self: auto; | |
width: auto; | |
} | |
.flexcol-half { | |
-webkit-order: 0; | |
-ms-flex-order: 0; | |
order: 0; | |
-webkit-flex: 0 1 auto; | |
-ms-flex: 0 1 auto; | |
flex: 0 1 auto; | |
-webkit-align-self: auto; | |
-ms-flex-item-align: auto; | |
align-self: auto; | |
width: 100%; | |
} | |
.flexcol-third { | |
-webkit-order: 0; | |
-ms-flex-order: 0; | |
order: 0; | |
-webkit-flex: 0 1 auto; | |
-ms-flex: 0 1 auto; | |
flex: 0 1 auto; | |
-webkit-align-self: auto; | |
-ms-flex-item-align: auto; | |
align-self: auto; | |
width: 100%; | |
} | |
.flexcol-two-thirds { | |
-webkit-order: 0; | |
-ms-flex-order: 0; | |
order: 0; | |
-webkit-flex: 0 1 auto; | |
-ms-flex: 0 1 auto; | |
flex: 0 1 auto; | |
-webkit-align-self: auto; | |
-ms-flex-item-align: auto; | |
align-self: auto; | |
width: 100%; | |
} | |
.flexcol-fourth { | |
-webkit-order: 0; | |
-ms-flex-order: 0; | |
order: 0; | |
-webkit-flex: 0 1 auto; | |
-ms-flex: 0 1 auto; | |
flex: 0 1 auto; | |
-webkit-align-self: auto; | |
-ms-flex-item-align: auto; | |
align-self: auto; | |
width: 100%; | |
} | |
.flexcol-three-fourths { | |
-webkit-order: 0; | |
-ms-flex-order: 0; | |
order: 0; | |
-webkit-flex: 0 1 auto; | |
-ms-flex: 0 1 auto; | |
flex: 0 1 auto; | |
-webkit-align-self: auto; | |
-ms-flex-item-align: auto; | |
align-self: auto; | |
width: 100%; | |
} | |
.flexcol-fifth { | |
-webkit-order: 0; | |
-ms-flex-order: 0; | |
order: 0; | |
-webkit-flex: 0 1 auto; | |
-ms-flex: 0 1 auto; | |
flex: 0 1 auto; | |
-webkit-align-self: auto; | |
-ms-flex-item-align: auto; | |
align-self: auto; | |
width: 100%; | |
} | |
.flexfallback { | |
margin-bottom: 10px; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment