详解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中Transform动画属性用法详解
Jul 04 HTML / CSS
全面解析CSS Media媒体查询使用操作(推荐)
Aug 15 HTML / CSS
深入浅出CSS3 background-clip,background-origin和border-image教程
Jan 27 HTML / CSS
image-set实现Retina屏幕下图片显示详细介绍
Dec 24 HTML / CSS
css3实现超立体3D图片侧翻倾斜效果
Apr 16 HTML / CSS
一款纯css3实现的鼠标经过按钮特效教程
Nov 09 HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
Dec 11 HTML / CSS
基于CSS3制作立体效果导航菜单
Jan 12 HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
Nov 05 HTML / CSS
使用HTML5做的导航条详细步骤
Oct 19 HTML / CSS
基于CSS3画一个iPhone
Apr 21 HTML / CSS
clear 万能清除浮动(clearfix:after)
May 21 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/04 无线电
PHP导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
php读取二进制流(C语言结构体struct数据文件)的深入解析
2013/06/13 PHP
php使用get_class_methods()函数获取分类的方法
2016/07/20 PHP
用javascript动态调整iframe高度的方法
2007/03/06 Javascript
jquery 图片轮换效果
2010/07/29 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
2013/09/03 Javascript
jquery.ajax之beforeSend方法使用介绍
2014/12/08 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
Vue单文件组件基础模板小结
2017/08/10 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
原生javascript自定义input[type=radio]效果示例
2019/08/27 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
[10:24]郎朗助力完美“圣”典,天籁交织奏响序曲
2016/12/18 DOTA
对pandas的算术运算和数据对齐实例详解
2018/12/22 Python
对pyqt5多线程正确的开启姿势详解
2019/06/14 Python
简单了解django缓存方式及配置
2019/07/19 Python
python元组的概念知识点
2019/11/19 Python
Python+Redis实现布隆过滤器
2019/12/08 Python
Anconda环境下Vscode安装Python的方法详解
2020/03/29 Python
如何通过python计算圆周率PI
2020/11/11 Python
python中yield的用法详解
2021/01/13 Python
医药代表个人的求职信分享
2013/12/08 职场文书
财务主管自我鉴定
2014/01/17 职场文书
团日活动策划书
2014/02/01 职场文书
《自选商场》教学反思
2014/02/14 职场文书
2014年班组工作总结
2014/11/20 职场文书
团组织推荐意见
2015/06/05 职场文书
出纳2015年度工作总结范文
2015/10/14 职场文书
golang 如何通过反射创建新对象
2021/04/28 Golang
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL
redis lua限流算法实现示例
2022/07/15 Redis