上节课我们主要介绍了 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 时,纵向是主轴,横向是辅轴,策略是相似的。
下面我们分别看一下这几个样式的作用:
片 3
它有 5 个值。
<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 是元素向终点看齐。
<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
元素在主轴方向上向尾部看齐。
<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
在主轴方向上居中看齐,有空白,刚往首尾方向放。
<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 效果。
<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 边距。