微信小程序Flex布局应用技巧详解如何深入理解？

本文共计1159个文字，预计阅读时间需要5分钟。

原文：本文字例讲述了微信小程序Flex布局用法。分享给大大家参考，具体如下：

Flex布局：Flexible Box的缩写，意为弹性布局，为盒模型提供巨大的灵活性。

使用说明：

1.任何容器都可弹性

简化版：

Flex布局：Flex Box缩写，弹性布局，提供盒模型高灵活性。

使用说明：

1.任意容器都能弹性使用

本文实例讲述了微信小程序Flex布局用法。分享给大家供大家参考，具体如下：

Flex布局： Flexible Box的缩写，意为“弹性布局”，为盒模型提供巨大的灵活性

使用说明：

1. 任何容器都可以使用flex布局

.box { display: flex; }

2.行内元素可以使用flex布局

.box{ display: inline-flex; }

3.webkit内核的浏览器，要加上-webkit前缀

.box { display: -webkit-flex; /* Safari */ display: flex; }

外层flex容器的属性：

1.flex-direction属性

.box { flex-direction: row | row-reverse | column | column-reverse; }

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

2.flex-wrap属性

.box{ flex-wrap: nowrap | wrap | wrap-reverse; }

nowrap (默认值) ：不换行。