详解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地图动态实例代码(圆圈向外扩散)
Jun 15 HTML / CSS
CSS3的新特性介绍
Oct 31 HTML / CSS
让IE6支持css3,让 IE7、IE8 都支持CSS3
Oct 09 HTML / CSS
使用CSS3制作响应式导航菜单的方法
Jul 12 HTML / CSS
css3 transform过渡抖动问题解决
Oct 23 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
Sep 12 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
Apr 25 HTML / CSS
x-ua-compatible content=”IE=7, IE=9″意思理解
Jul 22 HTML / CSS
5个你不知道的HTML5的接口介绍
Aug 07 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
Aug 22 HTML / CSS
canvas生成带二维码海报的踩坑记录
Sep 11 HTML / CSS
html2 canvas svg不能识别的解决方案
Jun 03 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(2)
2006/10/09 PHP
用Zend Encode编写开发PHP程序
2006/10/09 PHP
PHP 查找字符串常用函数介绍
2012/06/07 PHP
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
php实现过滤表单提交中html标签的方法
2014/10/17 PHP
php查询mysql数据库并将结果保存到数组的方法
2015/03/18 PHP
PHP MySql增删改查的简单实例
2016/06/21 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
JS不间断向上滚动效果代码
2013/12/25 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
2015/02/28 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
2015/03/25 Javascript
纯js实现悬浮按钮组件
2016/12/17 Javascript
js实现二级导航功能
2017/03/03 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
基于BootStrap实现简洁注册界面
2017/07/20 Javascript
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
详解webpack+ES6+Sass搭建多页面应用
2018/11/05 Javascript
JS实现移动端在线签协议功能
2019/08/22 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
2019/09/10 Javascript
vue自动化路由的实现代码
2019/09/30 Javascript
node.js Promise对象的使用方法实例分析
2019/12/26 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
Vue中多元素过渡特效的解决方案
2020/02/05 Javascript
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
python 基于opencv实现高斯平滑
2020/12/18 Python
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
幼儿园亲子活动总结
2014/04/26 职场文书
2014年巴西世界杯口号
2014/06/05 职场文书
后勤工作个人总结
2015/02/28 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书
python如何进行基准测试
2021/04/26 Python
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js