flex弹性布局绘制常见的圣杯布局

最新推荐文章于 2023-08-31 18:13:34 发布

yanwuhc

最新推荐文章于 2023-08-31 18:13:34 发布

阅读量187

点赞数

分类专栏： css 文章标签： css flex

本文链接：https://blog.csdn.net/weixin_44303404/article/details/114946894

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

今天复习了一遍flex弹性布局，手写了一个圣杯布局，做做笔记。

关键点：

1.body的最小高度为浏览器的百分百高度，即100vh。

2.flex布局的flex-direction更改主轴方向，justify-content设置主轴排列方式。

3.flex:1可以很容易得到一个元素剩余宽度/高度的百分百。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      margin: 0;
      padding: 0;
      min-height: 100vh;
      background-color: grey;
      /* 下面三行使header和footer贴紧浏览器 */
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .header, .footer{
      /* 基本样式 */
      width: 100%;
      height: 80px;
      line-height: 80px;
      background-color: pink;
      text-align: center;
    }
    .main{
      /* flex: 1;让中间部分占据了body剩下的空位 */
      flex: 1;
      background-color: lightblue;
      /* 这里设置flex是为了让主内容占据剩余位置 */
      display: flex;
    }

    .nav, .sli{
      width: 100px;
      background-color: lightcoral;
    }
    .content{
      /* 占据main剩余主体位置 */
      flex: 1;
      /* height: 2000px;可以自由设置 */
    }
  </style>
</head>
<body class="box">
  <div class="header">
    顶部栏
  </div>
  <div class="main">
    <div class="nav">导航栏</div>
    <div class="content">主内容</div>
    <div class="sli">右侧栏</div>
  </div>
  <div class="footer">
    底部栏
  </div>
</body>
</html>

效果如下：
在这里插入图片描述

yanwuhc

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
flex弹性布局绘制常见的圣杯布局

今天复习了一遍flex弹性布局，手写了一个圣杯布局，做做笔记。关键点：1.body的最小高度为浏览器的百分百高度，即100vh。2.flex布局的flex-direction更改主轴方向，justify-content设置主轴排列方式。3.flex:1可以很容易得到一个元素剩余宽度/高度的百分百。代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <m
复制链接

扫一扫

专栏目录