微信小程序CSS之Flex布局

相信刚开始学习开发小程序的初学者一定对界面的布局很困扰，不知道怎么布局，怎么摆放位置，其原因是不了解CSS样式的属性，所以，今天代码君打算写一篇关于CSS的教程，给大家普及一下。

说起CSS布局，首先要讲解的就是FLex布局，这个可以说是一个万能钥匙，遇到什么复杂的布局，都可以通过Flex布局搞定，为了方便大家理解Flex属性，我将会一步步解析FLex的属性，并附上效果图

基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

Flex容器属性

Flex总共有6个属性：

• flex-direction 设置排列方向
• flex-wrap 内容满一行，是否换行
• flex-flow flex-direction属性和flex-wrap属性的简写形式
• justify-content 左右对齐方式
• align-items 上下对齐方式
• align-content 多行上下对齐方式

1. flex-direction属性
   flex-direction决定了item里面排列的方向，有下面四个属性值

• row（默认值）：横向排序，从左边起开始排列item。
• row-reverse：横向排序，从右边起开始排列it