2.4 KiB

Raw Blame History

flex布局案例-圣杯布局

先上代码，效果在后面

代码

html结构

<div class="HolyGrail"> <!--HolyGrail可定义在body-->
  <header>#header</header>
  <div class="wrap">
    <nav class="left">left 宽度固定200px</nav>
    <main class="content">center 宽度自适应</main>
    <aside class="right">right 宽度固定200px</aside>
  </div>
  <footer>#footer</footer>
</div>

css样式

.HolyGrail {text-align: center;
  display: flex;
  min-height: 60vh;
  flex-direction: column;
}
.HolyGrail .wrap {
  display: flex;
  flex: 1;
}
.HolyGrail .content {
  background: #eee;
  /* 等分空间，同flex-grow: 1，同flex:auto， 同flex:1 1 auto */
  flex: 1;
}
.HolyGrail .left,.HolyGrail .right {
  background:lightgreen;
  /* 两个边栏的宽度设为固定 */
  /* flex: 0允许放大 0不缩小 200px固定宽度;  同 flex-shrink: 0;flex-basis: 200px; */
  flex: 0 0 200px;
}
/* 基础样式 */
.HolyGrail header,.HolyGrail footer{
  background:#999;
  height: 50px;
  line-height: 50px;
}
.HolyGrail .left {
  background:salmon;
}

效果

可用F12开发者工具查看代码

#header

left 宽度固定200px center 宽度自适应

#footer

参考：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

2.4 KiB Raw Blame History Unescape Escape

flex布局案例-圣杯布局

代码

效果

2.4 KiB

Raw Blame History