Flex 布局的圣杯布局：两种优雅的方法

2023-11-22 20:10:28

Flex 布局的圣杯布局

在网页设计中，圣杯布局是一种经典的三栏布局，由一个居中的内容区域和两侧的边栏组成。传统上，使用浮动或定位来实现这种布局，但随着 Flexbox 布局模块的出现，我们可以采用一种更优雅、更灵活的方法。

Flex 布局实现圣杯布局

使用 Flexbox 布局实现圣杯布局有两种主要方法：

方法一：设置父元素为 Flex 容器

在这种方法中，我们为父元素设置 `display: flex` 属性，使其成为 Flex 容器。然后，我们将子元素设置为 Flex 项目，如下所示：

/* 父元素为 Flex 容器 */
.wrapper {
  display: flex;
}

/* 左侧边栏 */
.sidebar-left {
  flex: 1 1 auto; /* 1 份固定宽度，1 份灵活宽度 */
  width: 200px;
  height: 100vh; /* 100% 视口高度 */
}

/* 中间内容区域 */
.content {
  flex: 2 1 auto; /* 2 份固定宽度，1 份灵活宽度 */
}

/* 右侧边栏 */
.sidebar-right {
  flex: 1 1 auto; /* 1 份固定宽度，1 份灵活宽度 */
  width: 200px;
  height: 100vh;
}

使用这种方法，中间的内容区域将占用剩余的可用空间，而左右边栏将具有固定的宽度。

方法二：将中间内容区域设置为 Flex 容器

另一种方法是将中间的内容区域设置为 Flex 容器，如下所示：

/* 父元素为普通容器 */
.wrapper {
  display: block;
}

/* 中间内容区域为 Flex 容器 */
.content {
  display: flex;
  flex-direction: column; /* 设置垂直排列 */
}

/* 左侧边栏 */
.sidebar-left {
  width: 200px;
  height: 100vh;
  float: left; /* 使用浮动 */
}

/* 右侧边栏 */
.sidebar-right {
  width: 200px;
  height: 100vh;
  float: right; /* 使用浮动 */
}