# 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>
1
2
3
4
5
6
7
8
9

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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# 效果

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

#header
center 宽度自适应
#footer

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

更新于: 12/25/2019, 5:33:21 PM