从微信小程序看待FlexBox布局

说明

本文是作者Lefe所创，转载请注明出处，如果你在阅读的时候发现问题欢迎一起讨论。本文会不断更新。

正文

开始学习微信小程序时，需要掌握最基本的UI布局，有了UI的布局才是一个开始。下面主要通过一些例子来聊聊FlexBox布局，其实它和ReactNative大同小异。所以学习一门技术，其它的也就不愁了。下面主要通过一些例子来说明FlexBox是如何布局的。

FlexBox概述

1.png

• Flex container（容器）
  承载子视图的一个容器，也就是说一个视图，如果设置成display: flex;，那么它就是作为一个Flex container。其中它的子视图，称为FlexItem。

2.png

3.png

• 主轴（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文件

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，垂直方向布局，从上到下布局

4.png

flex-direction: column-reverse;，垂直方向布局，从下到上布局

column.png

flex-direction: row;，默认，水平方向布局，从左到右布局

.container {
    display: flex;
    flex-direction: row;
    background-color: lightblue;
}

row.png

flex-direction: row-reverse;，水平方向布局，从右到左布局

row-reverse.png

• 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;
}

norwrap.png

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: lightblue;
}

wrap.png

• 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;
}

space-around.png

.container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    background-color: lightblue;
}

space-between.png

• 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;
}

stretch.png

• 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;
}

align-content.png

二、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-grow.png

• 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-shrink.png

• 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的对其方式。

参考：

阮一峰
Flex box guide

===== 我是有底线的 ======
喜欢我的文章，欢迎关注我的新浪微博 Lefe_x，我会不定期的分享一些开发技巧