flex布局 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
<style>
.container {
    display: flex;
    margin-top: 60px;/*以下是默认属性，不写也行
            flex-flow: row nowrap;
            justify-content: flex-start;
            align-items: flex-start;   */
}
.main {
    background-color: #ffffa9;
    height: 500px;
    width: 100%;
    order: 2;
    flex: 3;
    display: flex;
}
.left {
    background-color: #ffd0d0;
    width: 160px;
    height: 400px;
    order: 1
}
.right {
    background-color: #a9ffa9;
    width: 160px;
    height: 400px;
    order: 3
}
.bootom {
    background-color: blue;
    padding: 20px;
    left: 0;
    bottom: 0;
    right: 0;
    position: fixed;
}
nav {
    background-color: red;
    left: 0;
    top: 0;
    right: 0;
    position: fixed;
    height: 60px;
}
h1 {
    font-size: 1rem;
    padding: 1rem;
    border: 1px dashed #FFF;
}
</style>
</head>

<body>
<nav></nav>
<div class="container">
  <div class="left">Left</div>
  <div class="main">
    <div style="width:150px; height:150px; border:1px solid #99BB11;">left</div>
    <div style=" border:1px solid #99BB11;justify-content:center; align-items:center;" >
      <h1>center</h1>
    </div>
    <div style="width:150px; height:150px; border:1px solid #99BB11;">right</div>
  </div>
  <div class="right">Right <br>
    <br>
    rrr </div>
</div>
<div class="bootom">bootom</div>
</body>
</html>

 

posted @ 2017-04-07 10:24  Yuri_trender  阅读(223)  评论(0)    收藏  举报