用flex加百分比實現左右布局,右邊區域再上下等分

2021-08-18 05:50:45 字數 739 閱讀 3687

用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...