详解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新特性应用之过渡与动画
Jan 10 HTML / CSS
如何利用CSS3制作3D效果文字具体实现样式
May 02 HTML / CSS
可以随进度显示不同颜色的css3进度条分享
Apr 11 HTML / CSS
纯css3制作网站后台管理面板
Dec 30 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
Nov 19 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
Jun 28 HTML / CSS
CSS3 animation ? steps 函数详解
Aug 30 HTML / CSS
CSS3 border-radius圆角的实现方法及用法详解
Sep 14 HTML / CSS
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
Jan 30 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
May 08 HTML / CSS
基于canvas的骨骼动画的示例代码
Jun 12 HTML / CSS
通过feDisplacementMap和feImage实现水波特效
Apr 24 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
法兰绒滤网冲泡
2021/03/03 冲泡冲煮
php读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
php中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
php计算多维数组中所有值总和的方法
2015/06/24 PHP
php的socket编程详解
2016/11/20 PHP
PHP实现浏览器中直接输出图片的方法示例
2018/03/14 PHP
2007/12/23更新创意无限,简单实用(javascript log)
2007/12/24 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
jQuery中hasClass()方法用法实例
2015/01/06 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
2017/05/20 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
使用layer模态框给新页面传值的方法
2019/09/27 Javascript
浏览器JavaScript调试功能无法使用解决方案
2020/09/18 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
2020/11/12 Javascript
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
python 函数内部修改外部变量的方法
2018/12/18 Python
PyQt5 多窗口连接实例
2019/06/19 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
Python实现元素等待代码实例
2019/11/11 Python
pytorch构建多模型实例
2020/01/15 Python
PyTorch的SoftMax交叉熵损失和梯度用法
2020/01/15 Python
python支持多继承吗
2020/06/19 Python
HTML5微信播放全屏问题的解决方法
2017/03/09 HTML / CSS
给孩子的新年寄语
2014/04/08 职场文书
班主任评语大全
2014/04/26 职场文书
任命书范本大全
2014/06/06 职场文书
企业安全生产月活动总结
2014/07/05 职场文书
2014年财务工作自我评价
2014/09/23 职场文书
工作态度恶劣检讨书
2015/05/06 职场文书
惊涛骇浪观后感
2015/06/05 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书
go 原生http web 服务跨域restful api的写法介绍
2021/04/27 Golang