圣杯布局之圣杯4：左中右均可自由伸展的圣杯布局

2024-02-05 00:41:24

圣杯布局4概述

圣杯布局4是圣杯布局的一种，它允许左、中、右三列均可自由伸展，并且具有良好的兼容性和灵活性。圣杯布局4的实现方法有很多种，最常见的方法是使用CSS的flexbox布局。

圣杯布局4的实现

使用CSS的flexbox布局实现圣杯布局4非常简单，只需要几行代码即可。

<div class="container">
  <div class="header"></div>
  <div class="body">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </div>
  <div class="footer"></div>
</div>

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header, .footer {
  flex: 0 0 auto;
}

.body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
}

.left, .center, .right {
  flex: 1 1 auto;
}

这段代码首先定义了一个名为container的容器，并将其设置为flex布局。然后，将container的子元素header、body和footer分别设置为flex项目的flex属性为0 0 auto，这意味着它们的高度将根据其内容自动调整。将body设置为flex项目的flex属性为1 1 auto，这意味着它将占据容器的剩余空间。最后，将left、center和right设置为flex项目的flex属性为1 1 auto，这意味着它们将均匀地占据body的空间。