Flex页面布局练习

山猪打不过家猪

于 2024-12-10 03:53:22 发布

阅读量341

点赞数 10

分类专栏：前端文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/weixin_42067536/article/details/144354983

版权

前端专栏收录该内容

12 篇文章

订阅专栏

文章目录

项目地址
一、练习1

项目地址

教程作者：
教程地址：

https://www.bilibili.com/video/BV1di4y1U75N/?spm_id_from=333.337.search-card.all.click&vd_source=791e6deaa9c8a56b1f845a0bc1431b71

代码仓库地址：

所用到的框架和插件：

Flex

一、练习1

在这里插入图片描述

1.1 页面初始化

初始化页面，里面有几个比较重要的点：
1. 在*里添加边框，这样所有的元素都有边框，对于布局很有帮助
2. 100vh表示百分之100的视口高度

    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        border: 1px solid black;
      }
      body {
        margin: 0;
        height: 100vh;
        background-color: #eee;
      }
    </style>

1.2 分析布局

在这里插入图片描述

1.2.1 首先是左右两边两个大盒子

  <body class="d-flex">
    <!-- 侧边栏 -->
    <div class="col-2" style="background-color: white"></div>
    <!-- 内容 -->
    <div class="col-10">    
    </div>
  </body>