摘要:基本的等分三列布局三列左中定寬右側自適應縮小瀏覽器窗口后左右固定,中間自適應縮小瀏覽器窗口后九宮格布局圣杯布局縮小瀏覽器窗口之后
基本的等分三列布局
.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
縮小瀏覽器窗口之后
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/114034.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); 我們在日常開發(fā)中經常遇到布局問題,下面羅列幾種常用的css布局方案話不多說,上代碼! 以下所有demo的源碼github:htt...
摘要:總結了幾種常見的頁面架構布局方案居中布局水平居中垂直居中水平垂直多列布局自適應布局等寬布局等高布局居中布局水平居中水平居中布局垂直居中水平垂直居中多列布局自適應布局定寬自適應 總結了幾種常見的頁面架構布局方案1.居中布局 a.水平居中 b.垂直居中 c.水平垂直 2.多列布局 a.自適應布局 b.等寬布局 c.等高布局 居中布局 水平居中 demo 1. inline...
閱讀 2473·2021-11-16 11:45
閱讀 2443·2021-10-11 10:59
閱讀 2251·2021-10-08 10:05
閱讀 3813·2021-09-23 11:30
閱讀 2369·2021-09-07 09:58
閱讀 789·2019-08-30 15:55
閱讀 773·2019-08-30 15:53
閱讀 1923·2019-08-29 17:00