用Flex實現的百分比布局

2021-07-30 15:45:27 字數 522 閱讀 3114

彈性布局在移動端頁面非常的有用,彈性布局主要利用的是css3的flex屬性。

下面分享乙個用flex來實現百分比布局的方法,這在移動端中是很常用的一種適配方法。

**如下:

1/4auto

1/3auto

1/31/2

auto

auto

程式執行結果:

引數解釋:

第乙個引數:flex-grow定義專案的放大比例,預設為0,即如果存在剩餘空間,也不放大。

第二個引數:flex-shrink定義了專案的縮小比例,預設為1,即如果空間不足,該專案將縮小。

第三個引數:flex-basis定義了在分配多餘空間之前,專案佔據的主軸空間(main size)。瀏覽器根據這個屬性,計算主軸是否有多餘空間。它的預設值為auto,即專案的本來大小。

百分比布局

參考位址 螢幕的適配是我們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...

CSS百分比布局

曾經的 布局可能大家都有點陌生了吧,其實我也是基本上沒用過,自從web2.0的興起,重構的思想,這讓 布局就這樣消失了基本上,布局中有用到百分比布局的,在 布局 落下帷幕之後,基本上我們都是讓網頁固定為950 1000px,如果布局使用了百分比寬度 如90 耳邊很快就能聽到抱怨 我的顯示器上效果不太...