React Native flex 布局使用總結

2021-09-11 10:53:53 字數 1215 閱讀 2786

父檢視屬性(容器屬性):

flexdirection : 對子布局方向的設定

row : 從左到右依次排列

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

column:(default) 從上到下排列

column-reverse :從下到上排列

複製**

flexwrap: 定義子布局是否在父布局中多行排列

wrap: 允許多行排列

nowrap:(defaut) 不允許多行排列

複製**

justifycontent : 定義子元素之間的排列方式

flex-start:(default) 從行首開始排列。每行第乙個彈性元素與行首對齊,同時所有後續的彈性元素與前乙個對齊。

flex-end: 從行尾開始排列。每行最後乙個彈性元素與行尾對齊,其他元素將與後乙個對齊。

center: 伸縮元素向每行中點排列。每行第乙個元素到行首的距離將與每行最後乙個元素到行尾的距離相同。

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

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

複製**

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

上面介紹的是父檢視的屬性,接下來介紹的是子檢視的屬性

複製**

alignself : 定義子檢視相對父容器的屬性 相當於在父檢視基礎上從新設定子檢視的位置

enum('auto', 'flex-start', 'flex-end', 'center', 'stretch')

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

center: 元素位於容器的中心。

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

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

複製**

2. flex :相當於設定子檢視的權重

具體教程參考

原始碼位址

鏈結

入門react native flex布局

一 flex屬性 1.1 flex父檢視屬性 1.1.1 flexdirection 定義view的主軸方向,在這個view下面的子元素會沿著主軸方向排列,可選方式 row 從左向右依次排列 row reverse 從右向左依次排列 column default 預設的排列方式,從上向下排列 col...

React Native flex(彈性布局)

flex,是flexible box的簡稱,意為彈性布局,在rn中是用來描述子元件在父元件中的對齊方式和相對位置,使其能夠適應不同的螢幕,為介面布局帶來更大的靈活性。flex布局由flex container 和flex item組成。flex container分為主軸 main axis 和交叉...

VMWare Workstation使用總結幾則

1 安裝 使用ghost盤安裝時一定要注意,需要把空盤建立分割槽並設定為主分割槽 pq的使用形式,進入pq找到磁碟設定為啟用 否則 啟動後顯示boot from network intel e1000 有時裝機忘了,只能從頭再來 安裝64位的虛擬機器時,需要把bios中virtual technol...