用flex加百分比實現左右布局,右邊區域再上下等分為三份。
demo可以延伸:
四分之一(25%),以此類推。
2.左邊區域上下或者左右布局(新增子元素,類似設定)。
3.加上瀏覽器字首,處理flex布局的相容性問題
charset="utf-8">
html,*
.container
.container
.container
.container
style>
111title>
head>
class="container">
div>
class="right1">
div>
class="right2">
div>
class="right3">
div>
class="right4">
div>
class="right5">
div>
class="right6">
div>
div>
div>
body>
html>最終效果如下:
用Flex實現的百分比布局
彈性布局在移動端頁面非常的有用,彈性布局主要利用的是css3的flex屬性。下面分享乙個用flex來實現百分比布局的方法,這在移動端中是很常用的一種適配方法。如下 1 4auto 1 3auto 1 31 2 auto auto 程式執行結果 引數解釋 第乙個引數 flex grow定義專案的放大比...
百分比布局
參考位址 螢幕的適配是我們android開發最經常做的事情之一,我們一直指望著能夠一套布局適配所有。於是在android5.0之後,提供了android support percent lib,這樣我們可以盡情的使用。使用的時候,我們嗯需要設定的有 layout marginpercent layo...
百分比布局
其中相對布局和幀布局官方是有支援庫的 compile com.android.support percent 25.3.0 但線性布局並沒有 public class percentlinearlayout extends linearlayout override protected void o...