摘要:基本的等分三列布局三列左中定宽右侧自适应缩小浏览器窗口后左右固定,中间自适应缩小浏览器窗口后九宫格布局圣杯布局缩小浏览器窗口之后
基本的等分三列布局
.container{ display: flex; width: 500px; height: 200px; } .left{ flex:1; background: red; } .middle{ flex:1; background: green; } .right{ flex:1; background: blue; }三列 左中定宽 右侧自适应
.container{ display: flex; height: 300px; } .left{ flex: 0 0 100px; background-color: red; } .middle{ flex: 0 0 100px; background-color: green; } .right{ flex:1; background-color: blue; }qqqqqqwwww
缩小浏览器窗口后
.container{ display: flex; height: 300px; } .left{ width: 100px; background-color: red; } .middle{ flex: 1; background-color: green; } .right{ width: 100px; background-color: blue; }qqqqqqwwww
缩小浏览器窗口后
.container{ display: flex; height: 300px; width: 300px; flex-direction: column; } .row{ display: flex; height: 100px; } .left{ flex: 1; height: 100px; border: 1px solid red; } .middle{ flex: 1; height: 100px; border: 1px solid green; } .right{ flex: 1; height: 100px; border: 1px solid blue; }圣杯布局
*{ margin:0; padding:0; } .container{ display: flex; flex-direction: column; min-height: 100vh; justify-content: space-between; } .header{ background: red; flex: 0 0 100px; } .content{ display: flex; flex:1; } .content-left{ flex: 0 0 100px; background: green; } .content-right{ flex: 0 0 100px; background: pink; } .content-middle{ flex:1; } .footer{ background: yellow; flex: 0 0 100px; }HeaderLeftCenterRight
缩小浏览器窗口之后
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/98416.html
摘要:基本的等分三列布局三列左中定宽右侧自适应缩小浏览器窗口后左右固定,中间自适应缩小浏览器窗口后九宫格布局圣杯布局缩小浏览器窗口之后 基本的等分三列布局 .container{ display: flex; width: 500px; height: 200px; } .left{ flex:1; ...
摘要:基本的等分三列布局三列左中定宽右侧自适应缩小浏览器窗口后左右固定,中间自适应缩小浏览器窗口后九宫格布局圣杯布局缩小浏览器窗口之后 基本的等分三列布局 .container{ display: flex; width: 500px; height: 200px; } .left{ flex:1; ...
摘要:无名布局自己瞎搞的,简单的绝对定位即可解决问题,为啥还要搞什么圣杯和双飞翼如果你觉得此文对你有一定的帮助,可以点击下方的喜欢收藏备用 showImg(https://segmentfault.com/img/remote/1460000010989115); 我们在日常开发中经常遇到布局问题,下面罗列几种常用的css布局方案话不多说,上代码! 以下所有demo的源码github:htt...
摘要:总结了几种常见的页面架构布局方案居中布局水平居中垂直居中水平垂直多列布局自适应布局等宽布局等高布局居中布局水平居中水平居中布局垂直居中水平垂直居中多列布局自适应布局定宽自适应 总结了几种常见的页面架构布局方案1.居中布局 a.水平居中 b.垂直居中 c.水平垂直 2.多列布局 a.自适应布局 b.等宽布局 c.等高布局 居中布局 水平居中 demo 1. inline...
阅读 3034·2023-04-25 15:44
阅读 1818·2019-08-30 13:11
阅读 2798·2019-08-30 11:11
阅读 2949·2019-08-29 17:21
阅读 1276·2019-08-29 15:38
阅读 851·2019-08-29 12:49
阅读 1761·2019-08-28 18:19
阅读 3197·2019-08-26 14:01