详解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实现3D旋转书本效果
Mar 21 HTML / CSS
css3动画过渡实现鼠标跟随导航效果
Feb 08 HTML / CSS
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
Nov 30 HTML / CSS
Html5大文件断点续传实现方法
Dec 05 HTML / CSS
html5简介_动力节点Java学院整理
Jul 07 HTML / CSS
有关HTML5页面在iPhoneX适配问题
Nov 13 HTML / CSS
Html5跳转到APP指定页面的实现
Jan 14 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 HTML / CSS
html5简介及新增功能介绍
May 18 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
Jun 15 HTML / CSS
详解淘宝H5 sign加密算法
Aug 25 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中Date()时间日期函数的使用方法小结
2011/04/20 PHP
PHP 第三节 变量介绍
2012/04/28 PHP
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
php写的AES加密解密类分享
2014/06/20 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
php实现购物车产品删除功能(2)
2020/07/23 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
屏蔽F1~F12的快捷键的js函数
2010/05/06 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
javascript中数组的冒泡排序使用示例
2013/12/18 Javascript
jquery $(document).ready()和window.onload的区别浅析
2015/02/04 Javascript
js下将金额数字每三位一逗号分隔
2016/02/19 Javascript
js一维数组、多维数组和对象的混合使用方法
2016/04/03 Javascript
iScroll.js 使用方法参考
2016/05/16 Javascript
jQuery 更改checkbox的状态,无效的解决方法
2016/07/22 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
javascript+css3开发打气球小游戏完整代码
2017/11/28 Javascript
angularjs实现table增加tr的方法
2018/02/27 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
2019/11/15 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
2020/11/12 Javascript
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
PyQt5中QTableWidget如何弹出菜单的示例代码
2020/02/23 Python
Python求两个字符串最长公共子序列代码实例
2020/03/05 Python
canvas学习笔记之绘制简单路径
2019/01/28 HTML / CSS
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
顶丰TOPPIK台湾官网:增发纤维假发,告别秃发困扰
2018/06/13 全球购物
大学校庆邀请函
2014/01/11 职场文书
关于廉洁的广播稿
2014/01/30 职场文书
幼儿园教师培训方案
2014/02/04 职场文书
医院学雷锋活动策划方案
2014/02/15 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP