
Untitled
By: a guest on
Aug 19th, 2012 | syntax:
None | size: 0.91 KB | hits: 6 | expires: Never
/**
* The first commented line is your dabblet’s title
*/
#body {
min-height: 100%;
background: beige;
width: 100%;
}
#main {
display: -webkit-flexbox;
width: 100%;
height: 100%;
}
#main div {
flex-pack: center;
flex: 1;
border: 8px solid pink;
box-sizing: border-box;
border-radius: 12px;
padding: 6px;
margin: 4px;
transition: all 0.3s ease-in-out;
}
#main div:nth-child(2) {
flex: 2;
}
#main div img {
width: 100%;
max-width: 700px;
}
#main div:last-child {
margin-right: 0;
}
@media all and (orientation: portrait) {
#main {
flex-direction: column-reverse;
}
}
@media all and (orientation: landscape) {
#main {
flex-direction: row;
}
#main div {
border-color: green;
}
}
@media handheld {
#media div {
border: 0;
padding: 2px;
background: grey;
color: purple;
}
}