时间:2021-05-08
如题:高度已知,左右栏宽度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三栏布局内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
CSS3弹性伸缩布局简介2009年,W3C提出了一种崭新的方案----Flex布局(即弹性伸缩布局),它可以简便、完整、响应式地实现各种页面布局,包括一直让人很
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直
Flex布局简介Flex英文为flexiablebox,翻译为弹性盒子,Flex布局即弹性布局。Flex布局为盒子模型提供了很大的灵活性,任何一个容器都可以指定
box-flex是css3新添加的盒子模型属性,它的出现打破了我们经常使用的浮动布局,实现垂直等高、水平均分、按比例划分。但是它有一定的局限性,在firefox
CSS中的Flex(弹性布局)可以很灵活的控制网页的布局,其中决定Flex布局内项目宽度/高度的是三个属性:flex-basis,flex-grow,flex-