258资源分享网

Flex布局是一种十分灵活方便的布局方式，目前主流的现代浏览器基本都实现了对Flex布局的完全支持。而在微信小程序中，IOS端使用的渲染引擎WKWebView和安卓端使用的X5 ，也都实现了对Flex的支持。所以为了在小程序开发中更方便地布局，有必要来详细了解下Flex布局在小程序的使用。本文将针对Flex布局的各个属性进行介绍，并直接使用wxss来编写例子，运行环境是小程序的开发者工具。

Flex布局直接应用于一个Flex容器，布局的对象是容器中的各个项目元素（“item”）。项目元素布局的核心概念在于两条轴：主轴和交叉轴，通过控制项目元素在主轴、交叉轴上的排列方式进行布局，参见下图：

这里要注意两条轴的方向不是固定的（可以通过flex-direction来控制）；此外一个Flex容器里可以再包含Flex容器，也就是能拥有多根主轴和交叉轴。

容器属性有6个：

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

设定主轴方向：

row →（默认）

row-reverse ←

column ↓

column-reverse↑

规定如果容器在主轴方向无法容下所有项目，主轴上的项目如何换行（flex-direction为column和column-reverse时，就是“换列”了）：

nowrap（默认），即不作换行，各个项目相接触时会挤压使宽度变小

wrap：换行，正常从上到下

wrap-reverse：换行，只是各行在交叉轴上的排列方向和wrap时相反

flex-direction和flex-wrap的简写，默认值为“row wrap”。

所有项目在主轴上对齐方式：

none（默认）

center：在主轴上居中

flex-start：主轴起点对齐

fex-end：主轴终点对齐

space-between：两端对齐，项目间间隔相等

space-around：各项目两侧间隔相等

所有项目在交叉轴上对齐方式：

stretch（默认），即项目取auto大小时拉伸以占满容器的在交叉轴方向上的大小

center：在交叉轴上居中

flex-start：交叉轴起点对齐

flex-end： 交叉轴终点对齐

baseline：各项目第一行文字的基线对齐

定义了多根主轴的对齐方式，如果项目只有一根主轴则不起作用，多根主轴一般会在主轴上折行时出现：

stretch（默认），即auto大小时主轴线上的项目会拉伸来占满整个交叉轴。

center：在交叉轴上居中

flex-start：交叉轴起点对齐

flex-end： 交叉轴终点对齐

space-between：两端对齐，项目间间隔相等

space-around：各项目两侧间隔相等

项目属性有6个：

order

flex-basis

flex-grow

flex-shrink

flex

align-self

定义项目排列序号；默认为0，可为负：

在Flex项目自适应放大缩小之前，项目占据的主轴空间的基值。