三列自适应布局(圣杯布局)

旧城等待， 2022-01-19 22:25 340阅读 0赞

## 介绍 ##

*  简单来说就是页面分为左中右3个部分，其中左右两侧固定宽度，而中间部分自适应。

## 实现 ##

*  假设每列的高度为150px，左列宽度为200px，右列宽度为150px，中间部分自适应。

### 方式一：左右浮动+中间100%宽度 ###

#### HTML结构 ####

*  需要一个父元素来包裹3列，这里为container

#### 在container中添加三列 ####

*  将三列都设置float:left;使其在同一排显示
 *  由于center宽度为100%将父元素占满了，因此left和right只能换行显示

#### 将left上移至center同行显示 ####

*  设置margin-left:-100%;left上移到center一行，并且与center重叠

.left {
       margin-left: -100%;
    }
    复制代码

*  设置相对位置且将left移动到父元素的左侧

.left {
       position: relative;
       right: 200px; /*自身宽度*/
    }
    复制代码

#### 将right上移至center同行显示 ####

*  设置margin-right:-150px;right上移到center一行，完成圣杯布局。此时改变窗口大小，中间区域会自适应变化。

.right {
       margin-right: -150px;
    }
    复制代码

### 关键点 ###

*  center放在文档流前面以便于优先渲染
 *  使用负外边距
 *  left使用相对定位

--------------------

### 方法二：绝对定位+中间不给宽度 ###

#### 完整代码 ####

### 关键点 ###

*  左右两侧使用绝对定位，中间设置margin值

#### 方法三：flex ####

##### HTML结构 #####

<div class="container">
        <div class="center">中间自适应</div>
        <div class="left">左侧定宽</div>
        <div class="right">右侧定宽</div>
    </div>
    复制代码

#### 将container设置为弹性布局，display:flex; ####

*  container变为了flex容器，子元素center、left、right自动变为了flex item

.container {
      display:flex;
    }
    复制代码

#### 调整item的位置 ####

*  通过设置item的order属性来调整位置
 *  order默认值为0，值越小item越靠前

.left {
      order: -1;
    }
    复制代码

#### 左右两侧定宽 ####

*  设置item的flex-basis属性固定宽度

.left {
      flex-basis: 200px;
    }
    .right {
      flex-basis: 150px;
    }
    复制代码

#### center自动填充剩余空间 ####

*  设置item的flex-grow属性为1，默认为0

.center {
      flex-grow:1;
    }
    复制代码

### 关键点 ###

*  父元素设置为弹性盒子
 *  左右两侧使用flex-basis设置元素本身大小
 *  中间使用flex-grow设置占满剩余空间

三列自适应布局(圣杯布局)

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关圣杯布局

相关经典布局方案（圣杯布局+双飞翼布局）左右固定，中间自适应

相关 flex与布局（基本网格布局、百分比布局、一侧固定一侧自适应、圣杯布局）

相关 CSS经典布局~圣杯布局

相关 CSS 圣杯布局

相关详解圣杯布局

相关三列自适应布局(圣杯布局)

相关圣杯布局

相关 flex 圣杯布局

相关圣杯布局