flex 跨浏览器的三列布局

 

 

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Flexbox实现三列等高布局</title>
    <style type="text/css" media="screen">
/*基本样式*/
*{
    margin: 0;
    padding: 0;
  -moz-box-sizing:border-box;
  -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
html,
body {
    height: 100%;
    color: #fff;
}
body {
    min-width: 100%;
}
header,
section,
nav,
aside,
footer {
    display: block;
}
header {
    background-color: hsla(200,10%,70%,.5);
    min-height: 100px;
    padding: 10px 20px;
    min-width: 100%;
}
section{
    min-width: 100%;
    margin: 20px 0;
}
nav {
    background-color: hsla(300,60%,20%,.9);
    padding: 1%;
    width: 220px;
}
article {
    background-color: hsla(120,50%,50%,.9);
    padding: 1%;
    margin-left: 2%;
    margin-right: 2%;
}
aside {
    background-color: hsla(20,80%,80%,.9);
    padding: 1%;
    width: 220px;
}
footer {
    background-color: hsla(250,50%,80%,.9);
    min-height: 60px;
    padding: 1%;
    min-width: 100%;
}
/*flexbox样式*/
body {
  /*设置body为伸缩容器*/
  display: -webkit-box;/*老版本：iOS 6-, Safari 3.1-6*/
  display: -moz-box;/*老版本：Firefox 19- */
  display: -ms-flexbox;/*混合版本：IE10*/
  display: -webkit-flex;/*新版本：Chrome*/
  display: flex;/*标准规范：Opera 12.1, Firefox 20+*/
  
  /*伸缩项目换行*/
  -moz-box-orient: vertical;
  -webkit-box-orient: vertical;
  -moz-box-direction: normal;
  -moz-box-direction: normal;
  -moz-box-lines: multiple;
  -webkit-box-lines: multiple;
  -webkit-flex-flow: column wrap;
  -ms-flex-flow: column wrap;
  flex-flow: column wrap;  
}
/*实现stick footer效果*/
section {
  display: -moz-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  
  -moz-box-orient: horizontal;
  -webkit-box-orient: horizontal;
  -moz-box-direction: normal;
  -webkit-box-direction: normal;
  -moz-box-lines: multiple;
  -webkit-box-lines: multiple;
  -ms-flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  
  -moz-box-align: stretch;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
}
article {
  -moz-box-flex: 1;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  -moz-box-ordinal-group: 2;
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 2;
  -webkit-order: 2;
  order: 2;
}
aside {
  -moz-box-ordinal-group: 3;
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 3;
  -webkit-order: 3;
  order: 3;
}
    </style>
</head>
<body>
    <header>我是页眉</header>
    <section>
        <article>我是主内容</article>
        <nav>我是侧边栏导航</nav>
        <aside>我是右边栏</aside>
    </section>
    <footer>我是页脚</footer>
</body>
</html>

 

兼容浏览器：

IE10+，Chrome，火狐，Safari，Opear

 

《图解CSS3：核心技术与案例实战》源码\code\chapter-8\8-57.html

 

参考资料：

Flex 布局教程：语法篇

 

posted @ 2017-04-08 16:14  linyongqin  阅读(243)  评论(0)  编辑  收藏  举报