小程序实战开发：flex弹性布局在小程序中的使用

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”任何一个元素都可以指定为Flex布局

display:flex | inline-flex 定义弹性伸缩盒容器类型

1. flex 将对象作为块级弹性弹性盒模型。
2. inline-flex 将对象作为内联块级弹性弹性盒模型。

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

容器的属性

1. flex-direction 排列盒子方向
   1) row(默认)： 横向从左到右排列（横向 ）。
   2) row-reverse： 对齐方式与row相反。 （倒序排列）
   3) column： 纵向从上往下排列（纵向）。
   4) column-reverse：对齐方式与column相反。 （倒序排列）
2. flex-wrap 换行方式
   1) flex-wrap：nowrap | wrap | wrap-reverse 控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向
   2) nowrap（默认）： flex容器为单行，不换行
   3) wrap： flex容器为多行。超出换行
   4) wrap-reverse：反转 wrap 排列
3. flex-flow集合属性，同时定义flex-direction和flex-wrap
4. justify-content在主轴方向上的项目对齐方式
   1) Flex-start(默认) 主轴起点对齐
   2) Flex-end 主轴终点对齐
   3) Center 主轴居中
   4) Space-between 主轴两端对齐,项目之间间隔相等
   5) Space-around 主轴每个项目两侧间隔相等，项目之间的间隔比项目到边框的间隔大一倍
5. align-items 项目在交叉轴上的对齐方式
   1) Flex-start 交叉轴起点对齐
   2) Flex-end 交叉轴终点对齐
   3) Center 交叉轴居中
   4) Space-between 交叉轴两端对齐,项目之间间隔相等
   5) Space-around 交叉轴每个项目两侧间隔相等，项目之间的间隔比项目到边框的间隔大一倍
   6) Stretch （默认）轴线占满整个交叉轴
6. align-content 如果容器的交叉轴方向有富余空间，设置每行应该如何垂直对齐。(一般不用)
   Flex-start Flex-end Center Space-between Space-around Stretch (默认) Space-evenly

项目的属性

1. order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0
2. flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
3. flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
4. flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
5. flex 是flex-grow,flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选

6. flex-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
   .item {

   align-self: auto | flex-start | flex-end | center | baseline | stretch;

   }
   该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

实战开发

UI

1、在进行热猫商城页面开发时我们应该将页面的布局根据UI先进行一个大体的规划 这样较直接开发会有一个效率的提升。比如上方UI中的蓝色头部区域可以划分为上中下三块 其中下方的这一块可以在划分为左中右三块 这样可以使得结构变得清晰明了

2、在进行带有九宫格或者结构清晰明了的页面开发时推荐使用flex弹性盒子布局开发  好处：不必使用float定义浮动 不会随着页面宽高的变化打乱排版 不必定义过多属性只使用flex布局就可以完成页面的开发

3、对上方UI中的九宫格使用flex布局

.box{

    width:100%;display:flex;flex-wrap:wrap;justify-content:flex-start;  align-items:flex-start;background:#fff;box-sizing:border-box; Padding:40rpx 10rpx;

}    (flex容器  白色区域)

.box .item{

    width:33%;height:200rpx;display:flex;flex-direction:column;justify-content:space-between;align-items:center;box-sizing:border-box;Padding:28rpx 0;font-size:28rpx;color:#000;

}   (项目 白色区域内九宫格的每一项)

.box .item .img{ width:90rpx;height:90rpx}  （项目中的图片）