React Native -- Flexbox

1、alignItems enum('flex-start', 'flex-end', 'center', 'stretch')

源碼描述

// How to align children in the cross direction
  // https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
  alignItems: ReactPropTypes.oneOf([
    'flex-start',
    'flex-end',
    'center',
    'stretch'
  ]),

• flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
• flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
• center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
• stretch：如果指定側軸大小的屬性值爲'auto'，則其值會使項目的邊距盒的尺寸儘可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。

示例代碼：

<h2>align-items:flex-start</h2>
<ul id="box" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>
<h2>align-items:flex-end</h2>
<ul id="box2" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>
<h2>align-items:center</h2>
<ul id="box3" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>
<h2>align-items:strecth</h2>
<ul id="box5" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>

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

適用於彈性盒模型子元素

源碼描述：

// How to align the element in the cross direction
  // https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
  alignSelf: ReactPropTypes.oneOf([
    'auto',
    'flex-start',
    'flex-end',
    'center',
    'stretch'
  ]),

• auto：如果'align-self'的值爲'auto'，則其計算值爲元素的父元素的'align-items'值，如果其沒有父元素，則計算值爲'stretch'。
• flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
• flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
• center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
• stretch：如果指定側軸大小的屬性值爲'auto'，則其值會使項目的邊距盒的尺寸儘可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。

3、justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')

適用於父類容器上

設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。

當彈性盒裏一行上的所有子元素都不能伸縮或已經達到其最大值時，這一屬性可協助對多餘的空間進行分配。當元素溢出某行時，這一屬性同樣會在對齊上進行控制。

源碼：

// How to align children in the main direction
  // https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
  justifyContent: ReactPropTypes.oneOf([
    'flex-start',
    'flex-end',
    'center',
    'space-between',
    'space-around'
  ]),

• flex-start：彈性盒子元素將向行起始位置對齊。該行的第一個子元素的主起始位置的邊界將與該行的主起始位置的邊界對齊，同時所有後續的伸縮盒項目與其前一個項目對齊。
• flex-end：彈性盒子元素將向行結束位置對齊。該行的第一個子元素的主結束位置的邊界將與該行的主結束位置的邊界對齊，同時所有後續的伸縮盒項目與其前一個項目對齊。
• center：彈性盒子元素將向行中間位置對齊。該行的子元素將相互對齊並在行中居中對齊，同時第一個元素與行的主起始位置的邊距等同與最後一個元素與行的主結束位置的邊距（如果剩餘空間是負數，則保持兩端相等長度的溢出）。
• space-between：彈性盒子元素會平均地分佈在行裏。如果最左邊的剩餘空間是負數，或該行只有一個子元素，則該值等效於'flex-start'。在其它情況下，第一個元素的邊界與行的主起始位置的邊界對齊，同時最後一個元素的邊界與行的主結束位置的邊距對齊，而剩餘的伸縮盒項目則平均分佈，並確保兩兩之間的空白空間相等。
• space-around：彈性盒子元素會平均地分佈在行裏，兩端保留子元素與子元素之間間距大小的一半。如果最左邊的剩餘空間是負數，或該行只有一個伸縮盒項目，則該值等效於'center'。在其它情況下，伸縮盒項目則平均分佈，並確保兩兩之間的空白空間相等，同時第一個元素前的空間以及最後一個元素後的空間爲其他空白空間的一半。

示例代碼：

<ul id="box" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>
<h2>justify-content:flex-end</h2>
<ul id="box2" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>
<h2>justify-content:center</h2>
<ul id="box3" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>
<h2>justify-content:space-between</h2>
<ul id="box4" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>
<h2>justify-content:space-around</h2>
<ul id="box5" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>

4、position enum('absolute', 'relative')

作用在父佈局容器上

源碼：

position: ReactPropTypes.oneOf([
    'absolute',
    'relative'
  ]),

5、其他

borderBottomWidth 數值型

borderLeftWidth 數值型

borderRightWidth 數值型

borderTopWidth 數值型

borderWidth 數值型

bottom 數值型

flex 數值型 

flexDirection enum('row', 'column') 

flexWrap enum('wrap', 'nowrap') 

height 數值型 

left 數值型 

margin 數值型

marginBottom 數值型 

marginHorizontal 數值型

marginLeft 數值型

marginRight 數值型 

marginTop 數值型

marginVertical 數值型 

padding 數值型

paddingBottom 數值型 

paddingHorizontal 數值型

paddingLeft 數值型 

paddingRight 數值型

paddingTop 數值型 

paddingVertical 數值型

right 數值型 

top 數值型 

width 數值型

6、參考文章

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://bocoup.com/weblog/dive-into-flexbox/

http://caibaojian.com/flexbox-guide.html

http://codepen.io