小程序：布局方法Flex简介

如果之前你接触过网页开发中的flexbox布局，基本上你可以略过这节。但有一点需要注意的是，你的小程序要求兼容到iOS8以下版本，需要开启样式自动补全。开启样式自动补全，在“设置”—“项目设置”—勾选“上传代码时样式自动补全”。

图4-2 开发者工具开启样式自动补全

在小程序开发中，我们需要考虑各种尺寸终端设备上的适配。在传统网页开发，我们用的是盒模型，通过display:inline | block | inline-block、 position、float来实现布局，缺乏灵活性且有些适配效果难以实现。比如像下面这种常见的信息列表，要求内容高度不确定下保持垂直居中：

​图4-3 常见的信息列表排版方式

这种情况下，我们更建议用flex布局。

在开始介绍flex之前，为了表述方便，我们约定以下术语：采用flex布局的元素，简称为“容器”，在代码示例中以container表示容器的类名。容器内的元素简称为“项目”，在代码示例中以item表示项目的类名。

图4-4 container容器和item项目

基本概念

flex的概念最早是在2009年被提出，目的是提供一种更灵活的布局模型，使容器能通过改变里面项目的高宽、顺序，来对可用空间实现最佳的填充，方便适配不同大小的内容区域。

在不固定高度信息的例子中，我们只需要在容器中设置以下两个属性即可实现内容不确定下的垂直居中。

.container{

  display: flex;

  flex-direction: column;

  justify-content: center;

}

flex不单是一个属性，它包含了一套新的属性集。属性集包括用于设置容器，和用于设置项目两部分。

设置容器的属性有：

display:flex;

flex-direction:row（默认值） | row-reverse | column |column-reverse

flex-wrap:nowrap（默认值） | wrap | wrap-reverse

justify-content:flex-start（默认值） | flex-end | center |space-between | space-around | space-evenly

align-items:stretch（默认值） | center  | flex-end | baseline | flex-start

align-content:stretch（默认值） | flex-start | center |flex-end | space-between | space-around | space-evenly

设置项目的属性有：

order:0（默认值） | <integer>

flex-shrink:1（默认值） | <number>

flex-grow:0（默认值） | <number>

flex-basis:auto（默认值） | <length>

flex:none | auto | @flex-grow @flex-shrink @flex-basis

align-self:auto（默认值） | flex-start | flex-end |center | baseline| stretch

在开始介绍各个属性之前，我们需要先明确一个坐标轴。默认的情况下，水平方向的是主轴（main axis），垂直方向的是交叉轴（cross axis）。

图4-5 默认情况下的主轴与交叉轴

项目是在主轴上排列，排满后在交叉轴方向换行。需要注意的是，交叉轴垂直于主轴，它的方向取决于主轴方向。

图4-6 项目是在主轴上排列，排满后在交叉轴方向换行

接下来的例子如无特殊声明，我们都以默认情况下的坐标轴为例。

容器属性

设置容器，用于统一管理容器内项目布局，也就是管理项目的排列方式和对齐方式。

flex-direction 属性

通过设置坐标轴，来设置项目排列方向。

.container{
  flex-direction: row（默认值） | row-reverse | column | column-reverse
}

• row（默认值）：主轴横向，方向为从左指向右。项目沿主轴排列，从左到右排列。

• row-reverse：row的反方向。主轴横向，方向为从右指向左。项目沿主轴排列，从右到左排列。

• column：主轴纵向，方向从上指向下。项目沿主轴排列，从上到下排列。

• column-reverse：column的反方向。主轴纵向，方向从下指向上。项目沿主轴排列，从下到上排列。

图4-7 flex-direction

flex-wrap 属性

设置是否允许项目多行排列，以及多行排列时换行的方向。

.container{
  flex-wrap: nowrap（默认值） | wrap | wrap-reverse
}

• nowrap（默认值）：不换行。如果单行内容过多，则溢出容器。
• wrap：容器单行容不下所有项目时，换行排列。
• wrap-reverse：容器单行容不下所有项目时，换行排列。换行方向为wrap时的反方向。

图4-8 flex-wrap

(未完待续。。。）