2.5 view及Flex布局简介：如何使用view实现常见的UI布局？（二）
2.5 view及Flex布局简介：如何使用view实现常见的UI布局？（二）
上节课我们主要介绍了 view 组件，及它的一些主要的属性，这节课我们继续介绍这个组件，以及如何基于 flex 布局思想，实现常见的 ui 布局。基本所有常见的布局，都可以使用 view 实现。
view 容器组件最大的作用，就是实现 ui 布局。最常用的是 flex 布局。flex 布局指将 display 样式设置为 flex，再加以其它相关的样式实现的布局。
关于 flex 布局有三个十分重要的样式：
1，justify-content：调整内容在主轴方向的排列方式
2，align-items：对齐元素在辅轴方向的对齐方式
3，align-content：对齐多行内容在辅轴方向上的排列方式
什么是主轴？什么是辅轴？主轴是 x 轴吗？辅轴是 y 轴吗？一定条件下是这样的，但不能这样简单理解。
片 2
以默认的 flex-direction 设置为 row 来看，从左到右是主轴，自上而下是侧轴，也叫辅轴。
在这种情况下，justify-content 管制的是元素在 x 方向的排列策略；align-items 管制的是主轴上排列的元素，在侧轴方向，即 y 方向上的对齐方式；align-content 管制的是，当出现多行以后，多行内容在辅轴方向上，即 y 轴方向上的排列策略。
这里涉及到两个词汇，一个是排列，一个是对齐。当我们讲排列时，一般是指两个或多个元素他们间隔多少；当我们讲对齐时，一般指多个元素它们的两边或中心线对齐的方式。
这三个属性很不好记，一时记住了，过一段时间用的时候可能还要查文档。可以这样辅助记忆：
1，在默认的以 x 轴为主轴的情况下，即 flex-direction 为 row，justify 单词的意思为调整或排列，css 样式 text-align 有一个值是 justify，它的意思是左右横向两端对齐，这里的 justify 也是横向调整的意思。至于 content，它比 items 的字面宽，更能代表行的意思。
2，负责元素排列与对齐的样式，除了 justify-content，就是 align-items。既然 justify-content 负责的是横向排列调整，那么 align-items 负责的就是纵向对齐了。
3，至于 align-content，结合 align-items 与 justify-content 记忆。align 指的是纵向对齐，content 指的是行，那么 align-content 指的就是多行的纵向排列方式。
4，当 flex-direction 为 column 时，纵向是主轴，横向是辅轴，策略是相似的。
下面我们分别看一下这几个样式的作用：
（一）justify-content
片 3
它有 5 个值。
第一个值：flex-start
<view class="section"> <view class="section__title">4 justify-content:flex-start</view> <view class="flex-wrp" style="flex-direction:row;;justify-content:flex-start"> <view class="flex-item bc_green">1</view> <view class="flex-item bc_red">2</view> <view class="flex-item bc_blue">3</view> </view></view>
片 4
这是默认值，元素向主轴的起点看齐。与 flex-start 对应的值是 flex-end，flex-end 是元素向终点看齐。
第二个值：flex-end
<view class="section"> <view class="section__title">5 justify-content:flex-end</view> <view class="flex-wrp" style="flex-direction:row;justify-content:flex-end"> <view class="flex-item bc_green">1</view> <view class="flex-item bc_red">2</view> <view class="flex-item bc_blue">3</view> </view></view>
片 5
元素在主轴方向上向尾部看齐。
第三个值：center
<view class="section"> <view class="section__title">6 justify-content:center</view> <view class="flex-wrp" style="flex-direction:row;justify-content:center"> <view class="flex-item bc_green">1</view> <view class="flex-item bc_red">2</view> <view class="flex-item bc_blue">3</view> </view></view>
片 6
在主轴方向上居中看齐，有空白，刚往首尾方向放。
第四个值：space-between
<view class="section"> <view class="section__title">7 justify-content:space-between</view> <view class="flex-wrp" style="flex-direction:row;justify-content:space-between"> <view class="flex-item bc_green">1</view> <view class="flex-item bc_red">2</view> <view class="flex-item bc_blue">3</view> </view></view>
片 7
向首尾看齐，相当于 align-text 的 justify 效果。两端子元素靠向父容器两端，其他子元素之间的间隔相等。元素周围是不留空间的。我们看到的效果图，周围有间隔，那是外层容器的 padding 效果。
第五个值：space-around
<view class="section"> <view class="section__title">8 justify-content:space-around</view> <view class="flex-wrp" style="flex-direction:row;justify-content:space-around"> <view class="flex-item bc_green">1</view> <view class="flex-item bc_red">2</view> <view class="flex-item bc_blue">3</view> </view></view>
片 8
空白在周围均匀分布。元素之间的间隔，与它与父容器之间的间隔是相同的。在视图效果中，两边间隔较多一点，这也是因为外容器本身已经有了一个 padding 边距。