flex的几种多列布局

时间：2023-03-30 19:12:40 CSS

基本三列布局.container{display:flex;宽度：500px；高度：200px；}.left{弹性：1;背景：红色；}.middle{弹性：1;背景：绿色；}.right{flex:1;背景：蓝色；

三-columnleftmiddlewidthrightadaptive.container{display:flex;高度：300px；}.left{flex:00100px;背景色：红色；}.middle{flex:00100px;背景色：绿色；}.right{flex:1;背景色：蓝色；}qqqqqqwwww浏览器窗口缩小后左右固定，中间自适应.container{display:flex;高度：300px；}.left{宽度：100px；背景色：红色；}.middle{flex:1;背景色：绿色；}.right{宽度：100px；背景色：蓝色；}qqqqqqwwww/div>缩小浏览器窗口后九宫格布局.container{display:flex;高度：300px；宽度：300px；弹性方向：列；}.row{显示：弹性；高度：100px；}.left{flex:1;高度：100px；边框：1px纯红色；}.middle{flex:1;高度：100px；边框：1px纯绿色；}.right{flex:1;高度：100px；边框：1px纯蓝色；}圣杯布局*{margin:0;填充：0；}.container{显示：弹性；弹性方向：列；最小高度：100vh；证明内容：空格之间；}.header{背景：红色；弹性：00100像素；}.content{显示：弹性；弹性：1；}.content-left{flex:00100px;背景：绿色；}.content-right{flex:00100px;背景：粉色；}.content-middle{flex:1;}.footer{背景d：黄色；弹性：00100像素；}Header

Left居中右页脚缩小浏览器窗口之后

上一篇：前端日常实践：35#视频演示如何将CSS径向渐变发挥到极致，只用一个DOM元素就可以画出国宝大熊猫

下一篇：学习CSS内联样式

flex的几种多列布局相关文章