flexboxLayout 一些屬性

2021-07-14 10:44:28 字數 2521 閱讀 5500

簡單來說 flexbox 是屬於web前端領域css的一種布局方案,是2023年w3c提出了一種新的布局方案,可以簡便、完整、響應式地實現各種頁面布局,並且 react native 也是使用的 flex 布局。

你可以簡單的理解為 flexbox 是css領域類似 linearlayout 的一種布局,但是要比 linearlayout 要強大的多。

剛才說了 flexbox 是css領域的比較強大的乙個布局,我們在 android 開發中使用 linearlayout + relativelayout 基本可以實現大部分複雜的布局,但是google就想了,有沒有類似 flexbox 的乙個布局呢?這使用起來乙個布局就可以搞定各種複雜的情況了,於是 flexboxlayout 就應運而生了。

使用方式很簡單,只需要新增以下依賴:

compile 'com.google.android:flexbox:0.1.2'

xml中這樣使用:

或者**中這樣使用:

使用起來是不是很像linearlayout的用法,只不過有很多屬性你們比較陌生,這些屬性都是flexbox布局本身具備的,別著急,下面跟你們介紹下flexboxlayout的一些具體屬性的用法與意義。

flexdirection

flexdirection 屬性決定主軸的方向(即專案的排列方向)。類似 linearlayout 的 vertical 和 horizontal。

有四個值可以選擇:

預設情況下 flex 跟 linearlayout 一樣,都是不帶換行排列的,但是flexwrap屬性可以支援換行排列。這個也比 linearlayout 吊啊有三個值:

justifycontent屬性定義了專案在主軸上的對齊方式。

alignitems屬性定義專案在副軸軸上如何對齊。

aligncontent屬性定義了多根軸線的對齊方式。如果專案只有一根軸線,該屬性不起作用。

除以上之外,flexboxlayout還支援如下子元素屬性:

layout_order

預設情況下子元素的排列方式按照文件流的順序依次排序,而order屬性可以控制排列的順序,負值在前,正值災後,按照從小到大的順序依次排列。我們說之所以 flexboxlayout 相對linearlayout強就是因為一些屬性比較給力,order就是其中之一。

layout_flexgrow 屬性定義專案的放大比例,預設為0,即如果存在剩餘空間,也不放大。一張圖看懂。跟 linearlayout 中的weight屬性一樣。

如果所有專案的 layout_flexgrow  屬性都為1,則它們將等分剩餘空間(如果有的話)。如果乙個專案的 layout_flexgrow  屬性為2,其他專案都為1,則前者佔據的剩餘空間將比其他項多一倍。

layout_flexshrink

layout_flexshrink  屬性定義了專案的縮小比例,預設為1,即如果空間不足,該專案將縮小。

如果所有專案的 layout_flexshrink  屬性都為1,當空間不足時,都將等比例縮小。如果乙個專案的flex-shrink屬性為0,其他專案都為1,則空間不足時,前者不縮小。

負值對該屬性無效。

layout_alignself

layout_alignself  屬性允許單個子元素有與其他子元素不一樣的對齊方式,可覆蓋 alignitems 屬性。預設值為auto,表示繼承父元素的 alignitems 屬性,如果沒有父元素,則等同於stretch。

該屬性可能取6個值,除了auto,其他都與align-items屬性完全一致。

layout_flexbasispercent

layout_flexbasispercent 屬性定義了在分配多餘空間之前,子元素佔據的main size主軸空間,瀏覽器根據這個屬性,計算主軸是否有多餘空間。它的預設值為auto,即子元素的本來大小。

跟傳統的css中的flexbox布局有些不同的是:

1. 沒有 flex-flow 屬性

2. 沒有 flex 屬性

3. layout_flexbasispercent 屬性即為css中 flexbox 中的 flexbasis 

屬性4. 不支援 min-width 和 min-height 兩個屬性

一些人,一些事,一些

我覺得這是國內it企業浮躁和傳統的官本位性質決定的,導致國內企業都本末倒置。要想改變命運,我覺得有以下出路 1.不做技術了,改做混混 混混的概念很廣泛的,比如銷售 經理 幹部 皮包公司之類其實都屬於這類。中國就是這樣,越浮越掙錢,只有混混才能發財。要不更進一步,做流氓,廣義的流氓,也很不錯。2.專心...

AND一些經驗

目錄 一 參考 1 程式設計師2020工作規範范文 總結 good 適合多看,程式設計師每天 每月做的事情總結了 一 目的 1 在公司來了很久了,有時候一些經驗想把記錄下來,專案 做人 等等 一 專案 1 板卡 pci2012a分為支援和不支援音效卡的 一 做人 1 不要過度依賴別人 1 有問題立馬...

一路走來,一些感觸,一些想法

頂著春運風暴,終於到家了。其實是昨天到家的,到家累的不行倒頭大睡,沒來得及寫。今天有時間就把自己的想法和大家分享下 記得在上篇博文中,我跟大家說過我們的團隊要代表學校參加乙個微軟的創新杯比賽,所以我也就隨團隊留校做那個參賽專案。今天是16號,其實我們8號就放假了,在學校待了將近一星期。本來買的是16...