/* 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