详解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 相关文章推荐
利用CSS的Sass预处理器(框架)来制作居中效果
Mar 10 HTML / CSS
使用CSS3在触屏上为按钮实现激活效果
Sep 27 HTML / CSS
css3中检验表单的required,focus,valid和invalid样式
Feb 21 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
Oct 29 HTML / CSS
HTML5的结构和语义(1):前言
Oct 17 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
Aug 08 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
Sep 18 HTML / CSS
HTML5 drag和drop具体使用详解
Jan 18 HTML / CSS
详解CSS故障艺术
May 25 HTML / CSS
html输入两个数实现加减乘除功能
Jul 01 HTML / CSS
Html5获取用户当前位置的几种方式
Jan 18 HTML / CSS
html中相对位置与绝对位置的具体使用
May 15 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
phpmail类发送邮件函数代码
2012/02/20 PHP
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
php对关联数组循环遍历的实现方法
2015/03/13 PHP
php抓取网站图片并保存的实现方法
2015/10/29 PHP
比较完整的微信开发php代码
2016/08/02 PHP
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
JS图片自动轮换效果实现思路附截图
2014/04/30 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
JavaScript必知必会(二) null 和undefined
2016/06/08 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
2016/10/17 Javascript
微信小程序 PHP后端form表单提交实例详解
2017/01/12 Javascript
React Native中Navigator的使用方法示例
2017/10/13 Javascript
JavaScript 九种跨域方式实现原理
2019/02/11 Javascript
Node.js之删除文件夹(含递归删除)代码实例
2019/09/09 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
2020/11/19 Javascript
Nest.js 授权验证的方法示例
2021/02/22 Javascript
Python中使用SAX解析xml实例
2014/11/21 Python
Python自动登录126邮箱的方法
2015/07/10 Python
基于Python实现的微信好友数据分析
2018/02/26 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
python开发一款翻译工具
2020/10/10 Python
Python识别处理照片中的条形码
2020/11/16 Python
揭牌仪式主持词
2014/03/19 职场文书
食品安全工作实施方案
2014/03/26 职场文书
教师节宣传方案
2014/05/23 职场文书
自查自纠工作总结
2014/10/15 职场文书
2016年教师反腐倡廉心得体会
2016/01/13 职场文书
《去年的树》教学反思
2016/02/18 职场文书
html form表单基础入门案例讲解
2021/07/15 HTML / CSS
Python简易开发之制作计算器
2022/04/28 Python
Windows server 2016服务器基本设置
2022/08/14 Servers