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实现网站商品展示效果图
Jan 18 HTML / CSS
CSS3实现淘宝留白的方法
Jun 05 HTML / CSS
详解CSS3实现响应式手风琴效果
Jun 10 HTML / CSS
解决H5的a标签的download属性下载service上的文件出现跨域问题
Jul 16 HTML / CSS
html5 拖拽上传图片实例演示
Apr 01 HTML / CSS
html5 Canvas实现图片旋转的示例
Jan 15 HTML / CSS
HTML5触摸事件实现移动端简易进度条的实现方法
May 04 HTML / CSS
HTML5拖放API实现自动生成相框功能
Apr 07 HTML / CSS
Html5饼图绘制实现统计图的方法
Aug 05 HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
Aug 13 HTML / CSS
AmazeUI 面板的实现示例
Aug 17 HTML / CSS
解决flex布局中子项目尺寸不受flex-shrink限制
May 11 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
php setcookie函数的参数说明及其用法
2014/04/20 PHP
利用PHP生成静态html页面的原理
2016/09/30 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
JavaScript检测原始值、引用值、属性
2016/06/20 Javascript
require.js配合插件text.js实现最简单的单页应用程序
2016/07/12 Javascript
Vue2实现组件props双向绑定
2016/12/02 Javascript
基于JavaScript实现屏幕滚动效果
2017/01/18 Javascript
jQuery编写textarea输入字数限制代码
2017/03/23 jQuery
Node.js利用断言模块assert进行单元测试的方法
2017/09/28 Javascript
vue 录制视频并压缩视频文件的方法
2018/07/27 Javascript
js隐式转换的知识实例讲解
2018/09/28 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
Element-UI中关于table表格的那些骚操作(小结)
2019/08/15 Javascript
[01:31](回顾)杀出重围,决战TI之巅
2014/07/01 DOTA
[56:24]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第二局
2016/03/04 DOTA
[02:59]DOTA2完美大师赛主赛事第三日精彩集锦
2017/11/25 DOTA
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
Python错误处理操作示例
2018/07/18 Python
Python调用C++,通过Pybind11制作Python接口
2018/10/16 Python
python使用requests模块实现爬取电影天堂最新电影信息
2019/04/03 Python
python程序中的线程操作 concurrent模块使用详解
2019/09/23 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
2019/11/15 Python
Pyspark读取parquet数据过程解析
2020/03/27 Python
基于Tensorflow读取MNIST数据集时网络超时的解决方式
2020/06/22 Python
用opencv给图片换背景色的示例代码
2020/07/08 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
纽约服装和生活方式品牌:Saturdays NYC
2017/08/13 全球购物
安全月活动总结
2014/05/05 职场文书
同乡会致辞
2015/07/30 职场文书
2016北大自主招生自荐信模板
2016/01/28 职场文书
MySQL 使用事件(Events)完成计划任务
2021/05/24 MySQL