_AMDG_ icon

rwd-flex example

_AMDG_ | PRO | 06/22/18 01:48:13 AM UTC | 0 ⭐ | 436 👁️ | Never ⏰ | []
CSS |

1.74 KB

|

None

|

0 👍

/

0 👎

/* RWD-Flex */
/* Copyright 2018 Andrew Porter */
 
* {
    box-sizing: border-box;
}
 
:root {
    width: 100%;
    height: 100%;
}
 
body {
    display: -webkit-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flexbox;
    display: flex;
    
    margin: 0;
    min-width: inherit;
    min-height: inherit;
    width: auto;
    height: auto;
 
    flex-flow: column nowrap;
}
 
/* Desktop */
@media only screen and (min-width: 768px){
 
    .row {
        display: -webkit-flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flexbox;
        display: flex;
        flex-flow: row nowrap;
    }
    
    .row.reverse {
        flex-direction: row-reverse;
    }
    
    .column {
        display: -webkit-flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flexbox;
        display: flex;
        flex-flow: column nowrap;
    }
    
    .column.reverse {
        flex-direction: column-reverse;
    }
    
    .wrap {
        flex-wrap: wrap;
    }
    
    .wrap-reverse {
        flex-wrap: wrap-reverse;
    }
    
    div.image {
        min-width: 0;
        min-height: 0;
    }
    
    div.image > img {
        max-width: 100%;
        max-height: 100%;
        height: auto;
    }
 
    img {
        object-fit: contain;
        -webkit-object-fit: contain;
        -o-object-fit: contain; 
    }
    
    .dummy {
        flex: 1 0 auto;
        visibility: hidden;
    }
 
}
 
/* Mobile */
@media only screen and (max-width: 768px) {
    
    .row {
        display: -webkit-flex;
        display: flex;
        flex-flow: row wrap;
        width: 100%;
        flex: 0 0 auto;
    }
    
    .column {
        flex: 0 1 auto;
        flex-grow: 1;
    }
    
    div.image {
        min-width: 0;
        min-height: 0;
    }
 
    div.image > img {
        max-width: 100%;
        max-height: 100%;
        height: auto;
    }
 
    img {
        object-fit: contain;
        -webkit-object-fit: contain;
        -o-object-fit: contain; 
    }
    
    .dummy {
        display: none;
    }
    
}

Comments