布局：flex弹性布局_圣杯布局

 圣杯布局：Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。

.HolyGrail{
  display: -webkit-flex;
  display: flex;

  min-height: 100vh;

  flex-direction: column;
  border:1px solid red;
  font-size:16px;
}

header,footer {
  flex: 1;
  border:1px solid green;
}

.HolyGrail-body {
  display: -webkit-flex;
  display: flex;
  flex: 1;
  border:1px solid red;
}

.HolyGrail-content {
  flex: 1;
  border:1px solid green;
}

.HolyGrail-nav, .HolyGrail-ads {
  flex: 0 0 16em;
  border:1px solid red;
}

.HolyGrail-nav {
  order: -1;
}
<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <title>H5标准页面</title>
    <link href="css/css实现树形图 - 副本 (2).css" rel="stylesheet" type="text/css" />

</head>

<body class="HolyGrail">
  <header>...</header>

  <section class="HolyGrail-body">
    <main class="HolyGrail-content">...</main>
    <nav class="HolyGrail-nav">...</nav>
    <aside class="HolyGrail-ads">...</aside>
  </section>

  <footer>...</footer>
</body>
</html>

如果是小屏幕，躯干的三栏自动变为垂直叠加。

@media (max-width: 768px) {
  .HolyGrail-body {
    flex-direction: column;
    flex: 1;
  }
  .HolyGrail-nav,
  .HolyGrail-ads,
  .HolyGrail-content {
    flex: auto;
  }
}

 

posted on 2019-08-12 16:11  九涅  阅读(549)  评论(0)    收藏  举报

导航