Flex Box 與常用 Styles

Flex Box

Flex Box 的 style 屬性有四個 flex, flexDirection, justifyContent, alignItems

其中 flex 代表該 element 應該擴展的大小, 0 代表不展開
另外三個則互相相關：

flexDirection 指定子 element 的排列方向, 'vertical'(column) 或 'horizontal'(row)
而 flexDirection 的值會影響 justifyContent 與 alignItems 兩個屬性所造成的效果
因為 justifyContent 代表內容物在主要軸上的分布方式
alignItems 代表內容物在次要軸上的對齊方式

其值範圍：

flexDirection enum('row', 'row-reverse', 'column', 'column-reverse')
justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')

alignItems: 'flex-start'(對齊前端 default) / 'center'(置中) / 'flex-end'(對齊尾端) / 'stretch'(填滿)

在 React Native 中
flexDirection 預設值為 column
這表示 justifyContent 的方向是 vertical , alignItems 的方向是 horizontal

所以在這樣的情況下

justifyContent: flex-start
alignItems: stretch

代表的是子 element 的排列方式是 向上對齊、左右填滿

同樣的值在 flexDirection: row 設定下

flexDirection: row
justifyContent: flex-start
alignItems: stretch

子 element 的排列方式變成 靠左對齊、上下填滿

其實只要記住 justifyContent 預設(column)下是直式
那 alignItems 自然就是橫的
row 模式下則是相反
這樣就比較簡單了

以下列出常用 style 屬性：

Layout Props
flex number
flexDirection enum('row', 'row-reverse', 'column', 'column-reverse')
flexWrap enum('wrap', 'nowrap')
justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')
alignItems enum('flex-start', 'flex-end', 'center', 'stretch')
alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch')

width number (以及 maxWidth, minWidth)
height number (以及 maxHeight, minHeight)
margin number (以及 marginHorizontal, marginVertical, marginTop, marginBottom, marginLeft, marginRight)
padding number (以及 paddingHorizontal, paddingVertical, paddingTop, paddingBottom, paddingLeft, paddingRight)

backgroundColor string
opacity number 0~1
borderRadius number (以及 borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius)
borderWidth number (以及 borderTopWidth, borderBottomWidth, borderLeftWidth, borderRightWidth)
borderColor string (以及 borderTopColor, borderBottomColor, borderLeftColor, borderRightColor)

position enum('absolute', 'relative')
top number (以及 bottom, left, right)
zIndex number

Transforms
transform:[
{perspective: number},
{rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, (ex:'45deg')
{scale: number}, {scaleX: number}, {scaleY: number},
{translateX: number}, {translateY: number},
{skewX: string}, {skewY: string},
]
decomposedMatrix DecomposedMatrixPropType
transformMatrix TransformMatrixPropType

Shadow Props (ios)
shadowColor color
shadowOffset {width: number, height: number}
shadowOpacity number
shadowRadius number


相關資料：
React Native - Layout Props
React Native - Transforms
React Native - Shadow Props
React Native Express - Flexbox
React Native Express - View