css3弹性盒子flex实现三栏布局的实现


Posted in HTML / CSS onNovember 12, 2020

如题:高度已知,左右栏宽度300px,中间自适应:

弹性盒子本身就是并排的,我们设置宽度即可。

用一个容器container包裹三栏,设置comtainer容器的display属性为flex,左右栏设置宽度为300px,中间栏设置flex:1,这里的1表示宽度比例,具体数值取决于其它盒子的flex值,由于这里其它盒子宽度固定,所以中间栏会自动填充:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏布局</title>
</head>
<style type="text/css">
    html*{
        margin: 0;
        padding: 0;
    }
    .container{
        display: flex;
    }
    .left{
        background-color: aqua;
        width: 300px;
        height: 100px;
    }
    .center{
        height: 100px;
        flex: 1;
        background: #f296ff;
    }
    .right{
        height: 100px;
        background-color: #6ee28d;
        width: 300px;
    }
</style>
<body>
<!-- 已知高度,写出三栏布局,左右宽度300px,中间自适应-->
<div class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
</body>


</html>

效果如图:

css3弹性盒子flex实现三栏布局的实现

到此这篇关于css3弹性盒子flex实现三栏布局的实现的文章就介绍到这了,更多相关css3 flex三栏布局内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3 简写animation
May 10 HTML / CSS
纯css3实现图片翻牌特效
Mar 10 HTML / CSS
CSS3制作缩略图的详细过程
Jul 08 HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
Apr 11 HTML / CSS
详解rem 适配布局
Oct 31 HTML / CSS
html5-Canvas可以在web中绘制各种图形
Dec 26 HTML / CSS
使用html5 canvas创建太空游戏的示例
May 08 HTML / CSS
html5将图片转换成base64的实例代码
Sep 21 HTML / CSS
HTML5中图片之间的缝隙完美解决方法
Jul 07 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
Jan 11 HTML / CSS
浅谈css实现背景颜色半透明的两种方法
Dec 06 HTML / CSS
HTML中link标签属性的具体用法
May 07 HTML / CSS
CSS3 按钮边框动画的实现
Nov 12 #HTML / CSS
CSS3 实现发光边框特效
Nov 11 #HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
Nov 10 #HTML / CSS
CSS3制作3D立方体loading特效
Nov 09 #HTML / CSS
CSS3实现莲花绽放的动画效果
Nov 06 #HTML / CSS
CSS3制作圆形滚动进度条动画的示例
Nov 05 #HTML / CSS
CSS实现进度条和订单进度条的示例
Nov 05 #HTML / CSS
You might like
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
php将图片文件转换成二进制输出的方法
2015/06/10 PHP
ExtJS GTGrid 简单用户管理
2009/07/01 Javascript
Tab页界面,用jQuery及Ajax技术实现
2009/09/21 Javascript
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
jquery图形密码实现方法
2015/03/11 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
浅析vue数据绑定
2017/01/17 Javascript
URL中“#” “?” &amp;“”号的作用浅析
2017/02/04 Javascript
angular中的http拦截器Interceptors的实现
2017/02/21 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
2017/05/10 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
requireJS模块化实现返回顶部功能的方法详解
2017/10/16 Javascript
express如何使用session与cookie的方法
2018/01/30 Javascript
vue组件间通信六种方式(总结篇)
2019/05/15 Javascript
图解NodeJS实现登录注册功能
2019/09/16 NodeJs
微信小程序实现文件预览
2020/10/22 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
2020/11/19 Vue.js
vue实现禁止浏览器记住密码功能的示例代码
2021/02/03 Vue.js
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
Python探索之自定义实现线程池
2017/10/27 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
window7下的python2.7版本和python3.5版本的opencv-python安装过程
2019/10/24 Python
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
Rosetta Stone官方网站:语言学习
2019/01/05 全球购物
旅游与酒店管理专业求职信
2014/07/21 职场文书
快递员岗位职责
2014/09/12 职场文书
2014年房地产个人工作总结
2014/12/20 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
实现一个简单得数据响应系统
2021/11/11 Javascript
Docker容器harbor私有仓库部署和管理
2022/08/05 Servers
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS