详解css3 flex弹性盒自动铺满写法


Posted in HTML / CSS onSeptember 17, 2020

本文主要介绍了详解css3 flex弹性盒自动铺满写法,分享给大家,具体如下:

<style type="text/css">
    .flexcontainer{
        width:100%;
        height: 100%;
        position: absolute;
        left:0px;
        top:0px;
        display: flex;
        flex-direction: column;
    }
    .flex1 {
        width: 100%;
        height: 8rem;
        float: left;
        background: #f00;
    
    }
    .flex2 {
        width: 100%;
        height: 4rem;
        flex:1;
        float: left;
        background: #000;
    }
   .flex3 {
        width: 100%;
        height: 7rem;
        float: left;
        background: #ccc;
    }    
</style>
<div class="flexcontainer">
    <div class="flex1"></div>
    <div class="flex2"></div>
    <div class="flex3"></div>
</div>

到此这篇关于详解css3 flex弹性盒自动铺满写法的文章就介绍到这了,更多相关css3 flex 自动铺满内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
详解css3 object-fit属性
Jul 27 HTML / CSS
css3 给背景设置渐变色的方法
Sep 12 HTML / CSS
css背景图片的背景裁切、背景透明度、背景变换等效果运用
Dec 24 HTML / CSS
使用CSS3创建动态菜单效果
Jul 10 HTML / CSS
CSS3实现swap交换动画
Jan 19 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
Jul 13 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
Mar 25 HTML / CSS
使用phonegap操作数据库的实现方法
Mar 31 HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
Jan 29 HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
Aug 01 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
Sep 16 HTML / CSS
CSS3实现模糊背景的三种效果示例
Mar 30 HTML / CSS
Css3实现无缝滚动防抖
Sep 14 #HTML / CSS
CSS3 border-radius圆角的实现方法及用法详解
Sep 14 #HTML / CSS
详解css3中dispaly的Grid布局与Flex布局
Sep 11 #HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 #HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
Aug 24 #HTML / CSS
css3实现动画的三种方式
Aug 24 #HTML / CSS
使用CSS3实现字体颜色渐变的实现
Aug 10 #HTML / CSS
You might like
PHP运行模式的深入理解
2013/06/03 PHP
读jQuery之四(优雅的迭代)
2011/06/20 Javascript
JavaScript基础知识之数据类型
2012/08/06 Javascript
Jquery 选中表格一列并对表格排序实现原理
2012/12/15 Javascript
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
jQuery使用元素属性attr赋值详解
2015/02/27 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
2015/09/17 Javascript
Bootstrap基本组件学习笔记之进度条(15)
2016/12/08 Javascript
JS仿京东移动端手指拨动切换轮播图效果
2020/04/10 Javascript
js 原型对象和原型链理解
2017/02/09 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
2017/04/23 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
vue通过数据过滤实现表格合并
2020/11/30 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
全面解析Python的While循环语句的使用方法
2015/10/13 Python
Python 2与Python 3版本和编码的对比
2017/02/14 Python
python print 按逗号或空格分隔的方法
2018/05/02 Python
Python requests库用法实例详解
2018/08/14 Python
Python测试模块doctest使用解析
2019/08/10 Python
Python-opencv 双线性插值实例
2020/01/17 Python
python如何实现单链表的反转
2020/02/10 Python
Python运行异常管理解决方案
2020/03/09 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
HTML5+css3:3D旋转木马效果相册
2017/01/03 HTML / CSS
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
如何开发安全的AJAX应用
2014/03/26 面试题
毕业生在校学习的自我评价分享
2013/10/08 职场文书
廉洁校园实施方案
2014/05/25 职场文书
材料化学专业求职信
2014/07/15 职场文书
三行辞职书范文
2015/02/26 职场文书
大学运动会加油稿
2015/07/22 职场文书
Python加密技术之RSA加密解密的实现
2022/04/08 Python
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL