详解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 和 HTML5 兼容速查表 图文
Apr 01 HTML / CSS
Css3+Js制作漂亮时钟(附源码)
Apr 24 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 HTML / CSS
HTML5标签小集
Aug 02 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
Jan 27 HTML / CSS
HTML5新增的表单元素和属性实例解析
Jul 07 HTML / CSS
html5的canvas方法使用指南
Dec 15 HTML / CSS
基于HTML5的齿轮动画特效
Feb 29 HTML / CSS
HTML5表单验证特性(知识点小结)
Mar 10 HTML / CSS
纯CSS实现酷炫的霓虹灯效果
Apr 13 HTML / CSS
HTML通过表单实现酒店筛选功能
May 18 HTML / CSS
关于flex 上下文中自动 margin的问题(完整例子)
May 20 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
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
php实现base64图片上传方式实例代码
2017/02/22 PHP
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
jquery 查找新建元素代码
2010/07/06 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
为jquery的ajaxfileupload增加附加参数的方法
2014/03/04 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
jQuery使用ajax跨域获取数据的简单实例
2016/05/18 Javascript
AngularJS 视图详解及示例代码
2016/08/17 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
使用rollup打包JS的方法步骤
2018/12/05 Javascript
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python 用lambda函数替换for循环的方法
2018/06/09 Python
python操作excel的方法
2018/08/16 Python
python实现从pdf文件中提取文本,并自动翻译的方法
2018/11/28 Python
Python 常用模块 re 使用方法详解
2019/06/06 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
使用Python将Exception异常错误堆栈信息写入日志文件
2020/04/08 Python
Python基于smtplib模块发送邮件代码实例
2020/05/29 Python
Python使用OpenPyXL处理Excel表格
2020/07/02 Python
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
ET Mall东森购物网:东森严选
2017/03/06 全球购物
Godiva巧克力英国官网:比利时歌帝梵巧克力
2018/08/28 全球购物
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
说出一些常用的类,包,接口
2014/09/22 面试题
几个Linux面试题笔试题
2016/08/01 面试题
Prototype是怎么扩展DOM的
2014/10/01 面试题
文员试用期转正自我鉴定
2014/09/14 职场文书
2014年纪检监察工作总结
2014/11/11 职场文书
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android
node快速搭建后台的实现步骤
2022/02/18 NodeJs