在前面的 【小程序】image组件的13种模式 中,我们使用了如下样式:
/// wxml 布局
<view>
<image mode="top left" src="{{image}}" />
<image mode="top" src="{{image}}" />
<image mode="top right" src="{{image}}" />
</view>
/// wxss 样式
view {
display: flex;
flex-direction: row;
align-items: center;
background-color: #000;
width: 400px;
height: 150px;
margin-top: 1px;
}
这里面使用了 display: flex; flex-direction: row;
,那么,什么是 Flex
?
Flex 布局
是 W3C 组织在 2009 年提出的一个新的布局方案,其宗旨是让页面的样式布局更加简单,并且可以很好地支持响应式布局。它是小程序官方推荐的布局方式,但并它本身是 CSS 语法
的一部分,而不是小程序所独有的技术。
Flex 也称为“弹性布局”,主要作用在容器上。比如上面的 view 组件就是一个容器,我们使用 display:flex
将这个 view 变成了一个弹性盒子。
flex-direction 属性
设置 display:flex
是应用一切弹性布局属性的先决条件,如果不设置 display:flex
,那么后续的其他相关弹性布局属性都将无效。在设置好 display:flex
自后,接着我们使用 flex-direction
这个属性指定 view 内元素的排列方向,这个属性可能的值有4个:
- row (默认值)
- column
- row-reverse
- column-reverse
为了方便理解,书中引入了“轴
”的概念,将 flex-direction
指定的方向定义为“主轴
”,将与之垂直的方向定义为“交叉轴
”。有兴趣可以自行去查阅,这里只介绍我自己的理解。
举个栗子
假设有一个 view,里面有3个 image,这3个 image 编码顺序是固定的。那么当我们一次将 view 的 flex-direction
的值修改为上面几种时,运行效果大致就是这样的:
这个效果和 Android 中的 LinearLayout
非常类似,只不过 LinearLayout
没有定义 reverse
的情况。对LinearLayout没有误解的童鞋,应该都看懂这个简陋的示意图,这里也就不再细说了。
align-items 属性
上个栗子中只介绍了排列方式,但 image 尺寸有大有小,它们是怎么对齐的呢?
flex 布局的对齐方式由 align-items
属性控制,书中作者引入的“轴”的感念同样延伸到了这个属性,个人觉得有点绕口,因此这里也只介绍自己的理解。如对“轴”的解释感兴趣,可自行去查阅。
现本人已知有效的属性值有如下3种:
- flex-start (默认) top/left 对齐
- center 居中对齐
- flex-end bottom/right对齐
接下来就结合实例做简要的说明。
举个栗子
这里我们以 flex-direction: row;
说事,其它情况类比即可。假设这3个 image 有如下的大小关系:
上图就是默认的对齐方式,也就是说,当排列方式是row时,默认是顶部对齐。而 center 则会让所有子组件按顺序摆放在容器中间(书中的“垂直轴”上),就是这样的:
center
没错,flex-end 的情况就是你理解的,这里就不再画图了。
一句话小结:flex-direction 的值是 row、row-reverse
时,对齐方式是上中下
;值是 column、column-reverse
时,对齐方式是左中右
。
网友评论