React Native 探索（四）Flexbox 佈局詳解
相關文章
React Native探索系列javascript
前言
在Android開發中咱們有不少種佈局，好比LinearLayout和RelativeLayout，一樣在React Native也有它的佈局，這個佈局就是Flexbox佈局。在CSS、React Native和Android等都有它的身影。這一篇文章，咱們就經過各類小例子來掌握React Native中的Flexbox佈局。html
1.Flexbox佈局概述
Flexbox譯爲彈性佈局（這裏咱們簡稱Flex），是CSS的一種佈局方案，能夠簡單、完整、響應式的實現各類頁面佈局。不僅是在CSS中應用，在React Native也使用了Flex，基本和CSS中的Flex相似。甚至在Android開發中咱們也會用到Flex，谷歌提供了基於Flex的FlexboxLayout，以便於處理複雜的佈局，所以，學習Flex佈局對於Android開發也是有幫助的。
採用Flex佈局的元素，稱爲Flex容器（flex container），簡稱容器，它的全部子元素則是Flex容器的成員稱爲Flex項目（flex item），簡稱項目。以下圖所示。java
容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置叫作main start，結束位置叫作main end。類似的，交叉軸的開始位置叫作cross start，結束位置叫作cross end。項目默認沿主軸排列，它在主軸上的長度叫作main size，交叉軸上的長度叫作cross size。react
2.Flexbox容器屬性
在CSS（React）中容器屬性有6種，而在React Native中容器屬性有5種，它們分別是：git
- flexDirection
- justifyContent
- alignItems
- alignContent
- flexWrap
下面經過小例子來分別介紹這些Flexbox容器屬性。github
flexDirection
flexDirection屬性能夠決定主軸的方向（即項目的排列方向），它有如下取值：react-native
- column(默認值)：主軸爲垂直方向，起點在頂端。
- row：主軸爲水平方向，起點在左端。
- column-reverse：主軸爲垂直方向，起點在下端。
- row-reverse：主軸爲水平方向，起點在右端。
咱們先將flexDirection設置爲row，代碼以下所示。微信
import React, {Component} from 'react';
import {AppRegistry, View} from 'react-native';
class FlexDirection extends Component {
render() {
return (
<View style={{flex: 1, flexDirection: 'row', backgroundColor: 'ivory'}}>
<View style={{width: 60, height: 60, backgroundColor: 'powderblue'}}/>
<View style={{width: 60, height: 60, backgroundColor: 'skyblue'}}/>
<View style={{width: 60, height: 60, backgroundColor: 'dodgerblue'}}/>
</View>
);
}
}
AppRegistry.registerComponent('AwesomeProject', () => FlexDirection);複製代碼
運行效果以下圖所示。
佈局
能夠看出項目（子組件）是水平排列的，而且起點在左端。關於例子中的顏色設定能夠查看官網文檔。咱們也能夠將flexDirection設置爲row-reverse，來查看效果：
學習
能夠看出Flex項目一樣是水平排列的，只是起點在右端。
justifyContent
justifyContent屬性用於定義項目在主軸上的對齊方式。它的取值有如下幾種：
- flex-start（默認值）：項目與父容器左端對齊。
- flex-end：項目與父容器右端對齊。
- center：居中。
- space-between： 兩端對齊，而且項目間隔相等。
- space-around：每一個項目的兩側間隔相等，所以，項目之間的間隔是項目與父容器邊緣間隔的2倍。
咱們將justifyContent設置爲flex-end，代碼以下所示。
import React, {Component} from 'react';
import {AppRegistry, View} from 'react-native';
class FlexDirection extends Component {
render() {
return (
<View style={{flex: 1, flexDirection: 'row', justifyContent: 'flex-end', backgroundColor: 'ivory'}}>
<View style={{width: 60, height: 60, backgroundColor: 'powderblue'}}/>
<View style={{width: 60, height: 60, backgroundColor: 'skyblue'}}/>
<View style={{width: 60, height: 60, backgroundColor: 'dodgerblue'}}/>
</View>
);
}
}
AppRegistry.registerComponent('AwesomeProject', () => FlexDirection);複製代碼
效果以下所示。
接下來咱們分別設置justifyContent爲flex-start和center，效果分別以下所示。
接下來咱們分別設置justifyContent爲space-between和space-around來查看它們有什麼區別，效果分別以下所示。
上面左圖是設置了space-between，能夠看出最左邊和最右邊的項目都和父容器沒有間隔，而且項目之間的間隔是相等的。右圖的是space-around，最左邊和最右邊的項目都和父容器有間隔，而且項目之間的間隔是項目與父容器的間隔的2倍。
alignItems
alignItems用於定義項目在交叉軸上的對齊方式。它的取值有如下幾種：
- flex-start：項目與父容器的頂部對齊。
- flex-end：項目與父容器的底部對齊。
- center：居中。
- baseline ：項目的第一行文字的基線對齊。
- stretch：（默認值）若是項目未設置高度或者高度設爲auto，項目將佔滿整個容器的高度，不然該取值不會生效。
將alignItems設置爲flex-end，代碼以下所示。
import React, {Component} from 'react';
import {AppRegistry, View} from 'react-native';
class FlexDirection extends Component {
render() {
return (
<View style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'flex-end',
backgroundColor: 'ivory'
}}>
<View style={{width: 60, height: 60, backgroundColor: 'powderblue'}}/>
<View style={{width: 60, height: 60, backgroundColor: 'skyblue'}}/>
<View style={{width: 60, height: 60, backgroundColor: 'dodgerblue'}}/>
</View>
);
}
}
AppRegistry.registerComponent('AwesomeProject', () => FlexDirection);複製代碼
效果以下圖所示。
看到flex-end的效果，flex-start和center的效果也很容易知道。咱們接下來將alignItems設置爲stretch，須要注意的是，當項目沒有設置高度或者高度設爲auto時，stretch纔會生效。這裏爲了驗證效果，將全部項目的高度設置爲auto。
import React, {Component} from 'react';
import {AppRegistry, View} from 'react-native';
class FlexDirection extends Component {
render() {
return (
<View style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'stretch',
backgroundColor: 'ivory'
}}>
<View style={{width: 60, height: 'auto', backgroundColor: 'powderblue'}}/>
<View style={{width: 60, height: 'auto', backgroundColor: 'skyblue'}}/>
<View style={{width: 60, height: 'auto', backgroundColor: 'dodgerblue'}}/>
</View>
);
}
}
AppRegistry.registerComponent('AwesomeProject', () => FlexDirection);複製代碼
效果以下圖所示。
能夠看出，當alignItems設置爲stretch時，項目會佔滿整個容器的高度。
alignContent
alignContent用於多行項目在交叉軸上的對齊方式。若是項目只有一行，該屬性是不起做用的。它的取值有 flex-start 、flex-end 、 center 、space-between 、 space-around 和 stretch，只比justifyContent的取值多了一個stretch（默認值，含義和alignItems的stretch相似），alignContent的取值的含義和justifyContent的取值的含義相似，這裏就不作舉例了。
flexWrap
flexWrap用於設置若是一行排不下，如何換行。它的取值有如下幾種：
- nowrap（默認）：不換行。
- wrap：換行，第一行在上方。
咱們將flexWrap設置爲wrap，代碼以下所示。
import React, {Component} from 'react';
import {AppRegistry, View} from 'react-native';
class FlexDirection extends Component {
render() {
return (
<View style={{
flex: 1,
flexDirection: 'row',
alignItems: 'flex-start',
flexWrap: 'wrap',
backgroundColor: 'ivory'
}}>
<View style={{width: 100, height: 60, backgroundColor: 'powderblue'}}/>
<View style={{width: 100, height: 60, backgroundColor: 'skyblue'}}/>
<View style={{width: 100, height: 60, backgroundColor: 'dodgerblue'}}/>
<View style={{width: 100, height: 60, backgroundColor: 'blue'}}/>
</View>
);
}
}
AppRegistry.registerComponent('AwesomeProject', () => FlexDirection);複製代碼
效果以下所示。
3.Flexbox項目屬性
在React Native中項目屬性有不少中，具體的能夠參考：Layout Props。這裏介紹flexGrow、flexShrink、flexBasis、flex和alignSelf。
flexGrow
flexGrow屬性定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大。
import React, {Component} from 'react';
import {AppRegistry, View} from 'react-native';
class FlexDirection extends Component {
render() {
return (
<View style={{
flex: 1,
flexDirection: 'row',
alignItems: 'flex-start',
backgroundColor: 'ivory'
}}>
<View style={{width: 50, height: 50, flexGrow: 1, backgroundColor: 'powderblue'}}/>
<View style={{width: 50, height: 50, flexGrow: 2, backgroundColor: 'skyblue'}}/>
<View style={{width: 50, height: 50, flexGrow: 1, backgroundColor: 'dodgerblue'}}/>
</View>
);
}
}
AppRegistry.registerComponent('AwesomeProject', () => FlexDirection);複製代碼
咱們將第二個項目flexGrow設置爲2，其餘的項目flexGrow設置爲1，這樣第二個項目所佔的剩餘空間是其餘項目的兩倍。以下圖所示。
flexShrink
flexShrink屬性定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。
import React, {Component} from 'react';
import {AppRegistry, View} from 'react-native';
class FlexDirection extends Component {
render() {
return (
<View style={{
flex: 1,
flexDirection: 'row',
alignItems: 'flex-start',
backgroundColor: 'ivory'
}}>
<View style={{width: 120, height: 50, flexShrink: 1, backgroundColor: 'powderblue'}}/>
<View style={{width: 120, height: 50, flexShrink: 0, backgroundColor: 'skyblue'}}/>
<View style={{width: 120, height: 50, flexShrink: 1, backgroundColor: 'dodgerblue'}}/>
<View style={{width: 120, height: 50, flexShrink: 1, backgroundColor: 'blue'}}/>
</View>
);
}
}
AppRegistry.registerComponent('AwesomeProject', () => FlexDirection);複製代碼
咱們將第二個項目的flexShrink設置爲0，其餘的項目都爲1，這樣當空間不足時，第二個項目不會縮小，以下圖所示。
flexBasis
flexBasis屬性定義了項目的初始寬度。它的默認值爲auto，即項目的原本的寬度。咱們知道width也能夠用來設置項目的寬度，若是項目同時設置了width和flexBasis，那麼flexBasis會覆蓋width的值。
import React, {Component} from 'react';
import {AppRegistry, View} from 'react-native';
class FlexDirection extends Component {
render() {
return (
<View style={{
flex: 1,
flexDirection: 'row',
alignItems: 'flex-start',
backgroundColor: 'ivory'
}}>
<View style={{width: 120, height: 50, flexBasis: 60, backgroundColor: 'powderblue'}}/>
<View style={{width: 120, height: 50, backgroundColor: 'skyblue'}}/>
<View style={{width: 120, height: 50, backgroundColor: 'dodgerblue'}}/>
<View style={{width: 120, height: 50, backgroundColor: 'blue'}}/>
</View>
);
}
}
AppRegistry.registerComponent('AwesomeProject', () => FlexDirection);複製代碼
效果以下圖所示。
flex
若是咱們每次都要設定flex-grow、flex-shrink和 flex-basis屬性，顯然有些麻煩，這時咱們能夠用flex 屬性，它是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性，默認值爲0 1 auto，其中後兩個屬性可選。關於flex這裏就不作舉例了。
alignSelf
alignSelf屬性和alignItems屬性相似，只不過alignSelf做用於項目，它容許單個項目有與其餘項目不同的對齊方式，而且覆蓋alignItems屬性。alignSelf默認值爲爲auto，表示繼承父元素的alignItems屬性，若是沒有父元素，則等同於stretch。alignSelf有五種取值：auto、flex-start、flex-end、center、baseline和stretch，除了多了auto，其餘的取值都和alignItems的取值含義同樣。
import React, {Component} from 'react';
import {AppRegistry, View} from 'react-native';
class FlexDirection extends Component {
render() {
return (
<View style={{
flex: 1,
flexDirection: 'row',
alignItems: 'flex-start',
backgroundColor: 'ivory'
}}>
<View style={{width: 60, height: 60, alignSelf: 'flex-end', backgroundColor: 'powderblue'}}/>
<View style={{width: 60, height: 60, alignSelf: 'center', backgroundColor: 'skyblue'}}/>
<View style={{width: 60, height: 'auto', alignSelf: 'stretch', backgroundColor: 'dodgerblue'}}/>
<View style={{width: 60, height: 60, alignSelf: 'auto', backgroundColor: 'blue'}}/>
</View>
);
}
}
AppRegistry.registerComponent('AwesomeProject', () => FlexDirection);複製代碼
運行效果以下所示。
好了，關於Flexbox佈局就講到這，還有不少屬性這裏沒有提到，好比：margin、padding、marginRight和maxWidth等等，這些屬性咱們一看名字就知道它的做用（Android開發者角度），所以這裏就很少介紹了，更多的屬性請查閱官方文檔。
參考資料
官方文檔
Flex 佈局教程：語法篇---阮一峯
React-Native之flexbox佈局篇
歡迎關注個人微信公衆號，第一時間得到博客更新提醒，以及更多成體系的Android相關原創技術乾貨。
掃一掃下方二維碼或者長按識別二維碼，便可關注。
- 1. react-native flexbox佈局
- 2. react-native入門(四)----flexbox佈局
- 3. react-native 佈局篇之flexbox
- 4. React Native flexBox佈局小結
- 5. React Native 彈性佈局FlexBox
- 6. React-Native之flexbox佈局篇
- 7. React Native佈局指南--FlexBox
- 8. React Native Flexbox & CSS3 Flexbox
- 9. React Native 基礎之 Flexbox 佈局
- 10. React Native入門 認識Flexbox佈局
- 更多相關文章...
- • 探索Redis事務回滾 - Redis教程
- • ASP.NET Web Pages - 頁面佈局 - ASP.NET 教程
- • Flink 數據傳輸及反壓詳解
- • JDK13 GA發佈：5大特性解讀
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Duang!超快Wi-Fi來襲
- 2. 機器學習-補充03 神經網絡之**函數(Activation Function)
- 3. git上開源maven項目部署 多module maven項目（多module maven+redis+tomcat+mysql）後臺部署流程學習記錄
- 4. ecliple-tomcat部署maven項目方式之一
- 5. eclipse新導入的項目經常可以看到「XX cannot be resolved to a type」的報錯信息
- 6. Spark RDD的依賴於DAG的工作原理
- 7. VMware安裝CentOS-8教程詳解
- 8. YDOOK：Java 項目 Spring 項目導入基本四大 jar 包 導入依賴，怎樣在 IDEA 的項目結構中導入 jar 包 導入依賴
- 9. 簡單方法使得putty（windows10上）可以免密登錄樹莓派
- 10. idea怎麼用本地maven
- 1. react-native flexbox佈局
- 2. react-native入門(四)----flexbox佈局
- 3. react-native 佈局篇之flexbox
- 4. React Native flexBox佈局小結
- 5. React Native 彈性佈局FlexBox
- 6. React-Native之flexbox佈局篇
- 7. React Native佈局指南--FlexBox
- 8. React Native Flexbox & CSS3 Flexbox
- 9. React Native 基礎之 Flexbox 佈局
- 10. React Native入門 認識Flexbox佈局