入門react native flex布局

2021-08-30 13:40:59 字數 2647 閱讀 5268

一、flex屬性:

1.1、flex父檢視屬性                            

1.1.1、flexdirection:

定義view的主軸方向,在這個view下面的子元素會沿著主軸方向排列,可選方式:

row: 從左向右依次排列

row-reverse: 從右向左依次排列

column(default): 預設的排列方式,從上向下排列

column-reverse: 從下向上排列

使用例子:

11.1.2、 flexwrap:

定義了子元素在父檢視內是否允許多行排列

nowrap:  flex的元素只排列在一行上,可能導致溢位

wrap flex: 元素在一行排列不下時,就進行多行排列

使用例子:

···1.1.3、  justifycontent:

瀏覽器如何分配順著父容器主軸的彈性(flex)元素之間及其周圍的空間

flex-start(default): 內容從行首位置開始

flex-end: 內容從行尾位置開始

center: 內容居中對齊

space-between: 在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第乙個元素與行首對齊,每行最後乙個元素與行尾對齊

space-around: 在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第乙個元素到行首的距離和每行最後乙個元素到行尾的距離將會是相鄰元素之間距離的一半

1.1.4 alignitems:

與justify-content相同的方式在側軸方向上將當前行上的彈性元素對齊,預設為stretch。

flex-start 元素向側軸起點對齊。

flex-end 元素向側軸終點對齊。

center 元素在側軸居中。如果元素在側軸上的高度高於其容器,那麼在兩個方向上溢位距離相同。

stretch 彈性元素被在側軸方向被拉伸到與容器相同的高度或寬度。

1.2、子檢視屬性

1.2.1、alignself  

alignself屬性以屬性定義了flex容器內被選中專案的對齊方式。注意:alignself 屬性可重寫靈活容器的 alignitems 屬性。

auto(default) 元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 "stretch"。

stretch    元素被拉伸以適應容器。

center    元素位於容器的中心。

flex-start    元素位於容器的開頭。

flex-end    元素位於容器的結尾。

使用例子:

11.2..2、flex

flex 屬性定義了乙個可伸縮元素的能力,預設為0 

flex:1

flex:2

flex:3

1.3、reactnative內的其它布局

1.3.3、檢視邊框

borderbottomwidth number 底部邊框寬度

borderleftwidth number 左邊框寬度

borderrightwidth number 右邊框寬度

bordertopwidth number 頂部邊框寬度

borderwidth number 邊框寬度

bordercolor 個方向邊框的顏色

bordercolor 邊框顏色

1.3.4、 尺寸

width number

height number

1.3.5、外邊距

margin number 外邊距

marginbottom number 下外邊距

marginhorizontal number 左右外邊距

marginleft number 左外邊距

marginright number 右外邊距

margintop number 上外邊距

marginvertical number 上下外邊距

1.3.6、內邊距

內邊距padding number 內邊距

paddingbottom number 下內邊距

paddinghorizontal number 左右內邊距

paddingleft number 做內邊距

paddingright number 右內邊距

paddingtop number 上內邊距

paddingvertical number 上下內邊距

1.3.7、邊緣

left number 屬性規定元素的左邊緣。該屬性定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。

right number 屬性規定元素的右邊緣。該屬性定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移

top number 屬性規定元素的頂部邊緣。該屬性定義了乙個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。

bottom number 屬性規定元素的底部邊緣。該屬性定義了乙個定位元素的下外邊距邊界與其包含塊下邊界之間的偏移

1.3.8、定位

absolute:生成絕對定位的元素,元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

relative:生成相對定位的元素,相對於其正常位置進行定位。因此,"left:20" 會向元素的 left 位置新增 20 畫素。

(6)入門 HTTP入門

http入門 80埠服務http協議 curl s v h frank s 不要顯示進度條 v顯示請求和相應 如果沒有只顯示響應 h frank 新增請求頭 get http 1.1 獲取根目錄,使用的協議是http 1.1 host www.baidu.com 網域名稱 user agent cu...

Hibernate入門 入門案例

4.1 資料庫建立表 create table cst customer cust id bigint 32 not null auto increment comment 客戶編號 主鍵 cust name varchar 32 not null comment 客戶名稱 公司名稱 cust so...

RocketMq入門 入門示例

網上眾說紛紜。有的說啟動命令不對,有的說rocketmq預設不允許開發者私自建立topic。最後手動建立topic。但是發現消費不了訊息,很奇怪。今天我又重新安裝了一遍rocketmq。測試了一下發現還可以。上圖是rocketmq的架構圖。我們必須要對上述的一些組建或者結點做一些說明解釋 produ...