CSS
语言:
CSSSCSS
确定
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
margin: 2em;
padding: 0;
background-color: #111D4A;
font-size: 66.5%;
}
header,
nav,
section,
article,
p,
aside,
footer,
div {
text-align: center;
padding: 1em;
margin: 0.5em;
background-color: #e4e4e4;
border: 0.1em dashed #111D4A;
}
div.main,
div.with-aside {
position: relative;
display: flex;
flex-flow: row nowrap;
padding-top: 2em;
}
div.main::before,
div.with-aside::before {
position: absolute;
top: 0.5em;
left: 0;
width: 100%;
content: 'flexbox div';
}
div.main .grow,
div.with-aside .grow {
flex-grow: 1;
}
section.left {
width: 66.6%;
}
section.right {
width: 33.3%;
display: flex;
flex-flow: column nowrap;
}
@media (max-width: 768px) {
section.main {
flex-flow: column nowrap;
}
section.left,
section.right {
width: 100%;
}
div.with-aside {
flex-flow: column nowrap;
}
}