相信刚开始学习开发小程序的初学者一定对界面的布局很困扰，不知道怎么布局，怎么摆放位置，其原因是不了解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 多行上下对齐方式
flex-direction决定了item里面排列的方向，有下面四个属性值
- row（默认值）：横向排序，从左边起开始排列item。
- row-reverse：横向排序，从右边起开始排列item。
- column：纵向排列，从顶部开始排列item。
- column-reverse：纵向排列，从底部开始排列item。
默认情况下，项目都排在一行上不换行，flex-wrap有三个属性值
- nowrap （默认）不换行
- wrap 如果第一行满了，换行
- wrap-reverse 换行，第一行在下方
justify-content用来定义item 左右对齐的方式，有以下五种
- flex-start（默认值）：左对齐
- flex-end：右对齐
- center： 居中
- space-between：等距对齐，两端对齐，item之间的间隔都相等。
- space-around：每个item两侧的间隔相等。所以，item之间的间隔比item与边框的间隔大一倍。
align-items用来定义item上下对齐的方式，也有五种
- flex-start：向上对齐
- flex-end：向下对齐。
- center：居中。
- baseline: item的第一行文字的基线对齐。
- stretch（默认值）：如果item未设置高度或设为auto，将占满整个容器的高度。
align-content是多行对齐方式，如果只有把一行，此属性不起作用
- flex-start：向上对齐。
- flex-end：向下对齐。
- center：居中。
- space-between：等距对齐，两端对齐，item之间的间隔都相等。
- space-around：每个item两侧的间隔相等。所以，item之间的间隔比item与边框的间隔大一倍。
- stretch（默认值）：所有item占满整个容器。
总结
好了，这些就是Flex的全部属性，最后告诉一下读者，不要只看文章，一定要跟着教程，去实战一下，只有这样，才可以对属性了解透彻，如果你掌握这些，相信市面上的小程序基础布局，你都可以实现的。
