[ 卡卡 DAY 7 ] - React Native style 必懂之 Flexbox弹性盒子(下)

上篇大致上介绍了一下於 css vs React Native 的 flexbox 差异
这篇主要就是实际上的运用了！

什麽是弹性盒子 flexbox ?

之所以叫盒子，就是要将弹性项目(子项目)放入这个盒子里面也就是容器，所以拥有 display:flex 属性的标签会是弹性项目们(子项目们)的容器(爸爸)。

看一下下面的 code

<View style={{ display: flex }}> 
  <Text>汉堡<Text>小黄瓜</Text></Text>
  <Text>三明治</Text>
  <Text>薯条</Text>
  <Text>热狗</Text>
  <Text>太阳蛋</Text>
</View>

卡卡我是这样分的
爸爸（View）- display: flex
孩子们（汉堡/三明治/薯条/热狗/太阳蛋) - 就是放在爸爸里面的元件
孙子(小黄瓜)跟他们的爸爸住一起（汉堡）

补充一下:
原生及就已经写上style
display:flex
所以不需要重复再写唷！

flex / justifyContent/ alignItem / flexDirection / flexWrap

简单的开始我们来将文字都放在画面的中间

记得我们在 Day 6 所建立的 flex1.js 我们於此档案的 styleseet 的 container 写入以下

const styles = StyleSheet.create({
    container: {
        flex: 1, 
        //flex 决定此元素在页面可用的区域，切成几块1 = 1块，所以一整块都是此元素的
        backgroundColor: 'pink',
        //backgroundColor 背景色
        alignItems: 'center',
        //alignItems 子项目对齐方式()
        justifyContent: 'center', 
        //justifyContent 子项目对齐方式(主轴)
    },
});

flex: 1 // 整个画面只切一块
backgroundColor: 'pink' // 背景色区块就是代表盒子的区块
justifyContent: 'center' // 孩子们主轴对齐方式
alignItems: 'center' // 孩子们次轴对齐方式
以上设定将孩子们集中在中间噜！

React Native flexbox 中的元素介绍

大致上有这些元素

# 排列方向:
flexDirection: 'column' || 'row'
# 主轴对齐(爸爸):
justifyContent: 'flex-start' || 'flex-end' || 'center' || 'space-around' || 'space-between'
# 交叉轴对齐(爸爸):
alignItems: 'stretch' || 'flex-start' || 'flex-end' || 'center'
# 交叉轴子项目对齐(孩子):
alignSelf: 'flex-start' || 'flex-end' || 'center' || 'stretch' || 'auto'
# 换行(爸爸):
flexWrap: 'nowrap' || 'wrap' || 'wrap-reverse'
# Define relative fluidity of an element(爸爸):
flex: number (e.g. 1, 1/2)
#当空间不足，子项目长大缩小(子)：
flexGrow/flexShrink: 1 || 0

flexWrap：是代表一条轴线排不下时，是否要换行。这是用於容器的属性(爸爸)。

不换行：nowrap代表这个容器中的项目是只能挤在同一行之中。
换行：wrap则是允许多行。
wrap-reverse 和 wrap 一样可以允许多行，但排列会相反。
补充: wrap 属性须在容器属性(爸爸)里，搭配flexDirection:'row'，才会有感!

下图为nowrap

下图为 wrap

alignItems、alignSelf、alignContent：是”对齐方式”的意思。
alignSelf 是用於弹性项目的属性(孩子们)预设为stretch，是填满的意思。
alignItems 跟 alignContent 则是用於容器的属性(爸爸)，都是应用在 cross axis(次轴)。