正文
开始学习微信小程序时,需要掌握最基本的UI布局,有了UI的布局才是一个开始。下面主要通过一些例子来聊聊FlexBox布局,其实它和ReactNative大同小异。所以学习一门技术,其它的也就不愁了。下面主要通过一些例子来说明FlexBox是如何布局的。
FlexBox概述
-
Flex container(容器)
承载子视图的一个容器,也就是说一个视图,如果设置成display: flex;,那么它就是作为一个Flex container。其中它的子视图,称为FlexItem。
-
主轴(Main axis):
主轴也就是水平轴,它决定了Flex item的布局的方向。也就是子视图的布局方向是从水平方向开始。 -
main-start | main-end
主轴的起点和结束点。 -
main size
Flex container占主轴的空间。 -
纵轴(cross axis)
垂直于主轴的轴成为纵轴,也叫交叉轴。 -
cross-start | cross-end
纵轴的起点和结束点。 -
cross size
Flex container占纵轴的空间。
一、容器属性介绍
-
display:flex
如果想采用FlexBox布局,必须设置 .container { display: flex; },这样这个视图将作为一个Flex container。 -
flex-direction:row | row-reverse | column | column-reverse;
它决定了子视图的布局方向,默认的布局方向是row。
me.wxml文件<view class="container"> <view class="children1"></view> <view class="children2"></view> <view class="children3"></view> </view>
me.wxss文件.container { display: flex; background-color: lightblue; } .children1 { width: 100rpx; height: 100rpx; background-color: red; } .children2 { width: 100rpx; height: 100rpx; background-color: yellow; } .children3 { width: 100rpx; height: 100rpx; background-color: purple; }
flex-direction:column,垂直方向布局,从上到下布局
flex-direction: column-reverse;,垂直方向布局,从下到上布局
flex-direction: row;,默认,水平方向布局,从左到右布局
.container { display: flex; flex-direction: row; background-color: lightblue; }
flex-direction: row-reverse;,水平方向布局,从右到左布局
-
flex-wrap:nowrap | wrap | wrap-reverse;
默认情况下flex items是在一行进行布局,使用flex-wrap可以改变flex items进行多行布局。默认情况微信小程序是采用的nowrap,它试图采用一行对flex items进行布局。.container { display: flex; flex-direction: row; flex-wrap: nowrap; background-color: lightblue; }
.container { display: flex; flex-direction: row; flex-wrap: wrap; background-color: lightblue; }
-
flex-flow: 是flex-direction 和 flex-wrap属性的简写,你可以这样定义。
.container { display: flex; flex-flow: row wrap; background-color: lightblue; }
-
justify-content:flex-start | flex-end | center | space-between | space-around;
flex items 在主轴上的对其方式。flex-start从主轴开始位置开始布局;flex-end从主轴结束位置开始布局;center居中布局;space-between第一个flex item在主轴的main-start,最后一个flex item在主轴的main-end位置;space-around:开始于结束的flex item所占的空间是中间flexItem直接距离的一半,中间flexItem之间的间距一样。
.container { display: flex; flex-flow: row wrap; justify-content: space-around; background-color: lightblue; }
.container { display: flex; flex-flow: row wrap; justify-content: space-between; background-color: lightblue; }
-
align-items:flex-start | flex-end | center | baseline | stretch; flex item在纵轴方向的对其方式。与主轴的布局大同小异。flex-start:布局的起点为cross-start;flex-end:布局的起点为cross-end;center:居中布局;baseline:与基线对其;
stretch:默认的属性,但是它依据flex item 的min-height和max-height.flex-container { height: 400rpx; display: flex; flex-direction: row; justify-content: space-around; align-items: stretch; background-color: lightblue; } .children1 { width: 100rpx; min-height: 100rpx; background-color: red; }
-
align-content:flex-start | flex-end | center | space-between | space-around | stretch;。多行时,纵轴的对齐方式,如果只有一行,它是没有作用的。
.flex-container { height: 400rpx; display: flex; flex-direction: row; justify-content: space-around; align-items: stretch; flex-wrap: wrap; align-content: flex-end; background-color: lightblue; } .children1 { width: 600rpx; height: 100rpx; background-color: red; } .children2 { width: 600rpx; height: 100rpx; background-color: yellow; } .children3 { width: 600rpx; height: 100rpx; background-color: purple; }
二、Flex item属性介绍
-
order:控制Flex item的顺序
.children1 { width: 100rpx; height: 100rpx; order: 3; background-color: red; }
-
flex-grow: 它必须是一个整数,它表示如何分配剩余的空间,只越大他所分配的剩余空间就越大。
.children1 { width: 20rpx; flex-grow: 1; height: 100rpx; background-color: red; } .children2 { width: 100rpx; height: 100rpx; background-color: yellow; } .children3 { width: 100rpx; flex-grow: 2; height: 100rpx; background-color: purple; }
-
flex-shrink: 它必须是一个整数,它表示如何缩小Flex item,当空间不足时,是否要缩小。
.children1 { width: 1000rpx; flex-shrink: 2; height: 100rpx; background-color: red; } .children2 { width: 100rpx; height: 100rpx; flex-shrink: 0; background-color: yellow; } .children3 { width: 1000rpx; flex-shrink: 3; height: 100rpx; background-color: purple; }
-
flex-basis:属性定义了在分配多余空间之前,项目占据的主轴空间(main size),他可以是固定的宽度,也可以是百分比。
.children1 { height: 100rpx; flex-basis: 50%; background-color: red; }
-
flex: 它是flex-grow, flex-shrink 和flex-basis的缩写。默认值为0 1 auto。
-
align-self:auto | flex-start | flex-end | center | baseline | stretch;表示单独一个Flex item的对其方式。