flex布局，构建一个响应式的后台网站

首先，介绍一下弹性盒的一些特点：

详情可以点击链接查看：弹性盒

效果如下：

完整代码实现部分：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>html{padding: 0;margin: 0;border: 0;}*{box-sizing: border-box;position: relative;padding: 0;margin: 0;}.layout{width: 100vw;height: 100vh;background: #eeeeee;display: flex;flex-direction: column;/*弹性盒主轴的方向：默认为水平，column为竖直方向*/}.head{background: yellow;}.main{flex: 1 1 auto;/*表示即放大又缩小*/background: rebeccapurple;display: flex;}.expand{/*设置定位，然后使top,left,right,bottom都为0,目的是：使得该元素被整个铺满*/position: absolute;top: 0;left: 0;right: 0;bottom: 0;display: flex;}.slider{background: blue;overflow-y: auto;}.content{background: #42b983;overflow-y: auto;}</style>
<body><div class="layout"><div class="head"><div style="height: 40px;"></div></div><div class="main"><div class="expand"><div class="slider"><div style="width: 100px;"></div></div><div class="content"><div class="expand"><div style="height: 1000px;"></div></div></div></div></div></div>
</body>
<script></script>
</html>

通过flex布局，实现以最少的代码，搭建网页的布局。

注意：flex 属性是 flex-grow、flex-shrink、flex-basis三个属性的缩写。

flex: 11 auto 表示可以放大和缩小

flex: 0 1 auto 表示不放大但会缩小（flex属性的默认值）

flex：0 0 auto 表示不放大也不缩小

flex布局，构建一个响应式的后台网站相关推荐

【前端代码实例】使用HTML5+CSS3+JavaScript制作一个响应式的后台管理系统~带侧边导航栏仪表盘功能
bilibili在线视频演示地址: [前端代码实例]使用HTML5+CSS3+JavaScript制作一个响应式的后台管理系统~带侧边导航栏仪表盘功能效果图: 完整代码: <!DOCTYPE ...
css响应式布局_用 CSS Grid 布局制作一个响应式柱状图
最新一段时间比较喜欢玩弄图表,出于好奇,我想找出比较好的用 CSS 制作图表的方案.开始学习网上开源图表库,它对我学习新的和不熟悉的前端技术很有帮助,比如这个:CSS Grid. 今天和大家分享我学到 ...
rapido-bootstrap响应式html后台管理模板,最值得拥有的免费Bootstrap后台管理模板
在PHP开发项目中,后台管理因为面向群体相对比较固定,大部分以实现业务逻辑和功能.使用Bootstrap后台模板可以让后端开发很轻松的就展现给客户一个响应式的后台,节约前端开发的时间.下面雷雪松给大家 ...
Spring Boot 实践折腾记（11）：使用 Spring 5的WebFlux快速构建效响应式REST API
关于Spring 5中的反应式编程支持Reactor类库,上一篇文章< Spring Boot 实践折腾记(10):2.0+版本中的反应式编程支持--Reactor>已经简要介绍过,Spr ...
20款响应式bootstrap后台模板源码下载
绿色清新的bootstrap响应式国外后台管理网站模板蓝色简洁的响应式手机端云后台管理系统模板扁平的html5 bootstrap手机后台管理模板源码下载 win8扁平风格响应式后台管理系统模板下 ...
【前端布局篇】响应式布局 Bootstrap 移动端布局
前言 1. 布局介绍布局:layout 对事物的全面规划和安排页面布局:对页面的文字.图形或表格进行格式设置.包括字体.字号.颜色纸张大小和方向以及页边距等. 网页布局:利用html搭建结构与内容 ...
html+css实现一个响应式管理平台架构模板
文本将会带你使用html+css实现一个响应式的管理平台架构模板,目前来说市面上的管理平台架构模板大同小异,文本的知识点都会符合场景所需. 目录 1.管理平台的架构内容 2.顶部的布局 3.下半部分布 ...
php-人员权限管理源码,基于ThinkPHP5+ACE框架开发的响应式通用后台权限管理系统PHP源码|响应式轻量级企业网站管理系统...
源码介绍基于ThinkPHP5+ACE框架开发的响应式通用后台权限管理系统PHP源码是一款响应式轻量级企业网站管理系统,采用ThinkPHP5.0.10+国外ACE1.40的UI模板的后台内容管理框 ...
表白墙网站php源码,自适应响应式表白墙网站PHP源码带后台管理
PHP表白墙源码校园版是一个以hybbs进行开发的校园表白墙php源码. 它可以做校园内的,也可以做校区间的,可封装成APP. 源码资源说明: 上传解压导入sql文件修改inc/cofign.php ...

flex布局，构建一个响应式的后台网站

flex布局，构建一个响应式的后台网站相关推荐

最新文章

热门文章