第 2 课：Flexbox 基础布局

• 日期：2026-09-01
• 课程序号：第 2 课
• 知识点：flexDirection、justifyContent 与 alignItems

用途

控制移动界面元素的排列、间距和对齐。

核心概念

• 默认主轴纵向，flexDirection: 'row' 改为横向。
• justifyContent 控制主轴，alignItems 控制交叉轴。

最小代码示例

<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
  <Text>上一课</Text><Text>下一课</Text>
</View>

3～5 分钟练习

创建高度 120 的容器，让文字水平和垂直居中。

参考答案

<View style={{ height: 120, justifyContent: 'center', alignItems: 'center' }}>
  <Text>居中内容</Text>
</View>

与上一课的联系

上一课用 View 和 Text 创建界面；本课开始控制它们的排列与对齐。