html响应式弹性布局,CSS3 使用弹性布局order属性实现响应式圣杯布局

CSS

语言：

CSSSCSS

确定

#main {

display: flex;

height: 300px;

}

#main > article {

order: 2;

min-width: 12em;

flex: 1;

}

#main > nav {

order: 1;

width: 150px;

}

#main > aside {

order: 3;

width: 150px;

}

@media all and (max-width: 600px) {

/* Too narrow to support three columns */

#main {

flex-flow: column;

}

#main > article,

#main > nav,

#main > aside {

/* Return them to document order */

order: 0;

width: auto;

}

}

/* other styles just for format */

html {

background: #ccc;

font-family: microsoft yahei;

}

body {

background: #222;

border-style: content-box;

text-align: center;

border-radius: 10px;

color: white;

padding: 15px;

}

header,

footer {

height: 40px;

line-height: 40px;

}

#main * {

padding: 20px 0;

margin: 10px 0;

}

article,

nav,

aside {

border-radius: 13px;

background: #aaa;

}

header,

footer {

border-radius: 10px;

background: #555;

}

#main article {

margin: 10px;

}