圣杯布局

Flex弹性化布局

by Robbie Yang

HTML

<body class="holy">
    <header class="header">#header</header>
    <div class="container">
        <div class="item left">#left</div>
        <div class="item content">#content</div>
        <div class="item right">#right</div>
    </div>
    <footer class="footer">#footer</footer>
</body>

CSS

html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.holy {
  display: flex;
  flex-direction: column;
}

.header {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  color: #000;
  background-color: rgba(215, 255, 123, 0.849);
}
.container {
  flex: 3;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.left {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(173, 76, 76)
}

.content {
  flex: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(115, 173, 76)
}

.right {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(112, 119, 221)
}

.footer {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  color: #fff;
  background-color: rgb(0, 0, 0);
}


@media (max-width: 960px) {
  .container {
    flex-direction: column;
  }
  .left ,.right ,.content {
    flex: auto;
  }
}