微信小程序之flex布局

一、flex布局

         1.  介绍：使用flex布局对页面的内容进行排版；所谓的flex就是一个盒 装弹性布局。（想像页面是一个大盒子，里面的内容就是一些个小盒子）。flex 是一个容器，所有子元素都是它的成员，我们对它的成员进行样式设置。

         2.使用：如果我们要想使用flex布局方式的话，首先就要给父元素开启flex布局功能，通过样式代码display:flex可以开启父元素的flex布局方式

          

         3.常用属性：

                  3.1.flex-diretion:排列方向-----row(行 从左到右[abcd  ])                                                                row-reverse(行 从右到左[dcba ]) 
                                                             columu(从上到下)，另一个相反
                 3.2.flex-wrap:换行规则-------nowrap默认不换行  wrap换行                                                                 wrap-reverse:逆向换行
                                                        （ab换行cde）---（de换行abc）
            
                 3.3.justify-content:对齐方式---flex-start:默认左对齐...

                                                                   flex-end:向右对齐...

                                                                    center:居中对齐...

                                                     space-around：在成员周围包裹空白                                                space-between：在成员元素之间留空白

         4.flex成员常用属性：  

                order：成员之间的显示顺序；

                flex：成员所占屏幕的比例。

二、小程序组件

                      1.视图组件：

                                        1.1 view：

                                        1.2 scroll-view：可滚动视图：

注意事项：使用竖向滚动时，需要给scroll-view一个固定高度。

                  横向滚动需打开 enable-flex 以兼容 WebView，如 <scroll-view scroll-x enable-flex style="flex-direction: row;"/>

                                        1.3 swiper滑块视图:

注意事项：其中只可放置swiper-item组件，否则会导致未定义的行为。

                                        1.4 movable-area(view)：可移动的视图容器

注意事项：movable-view在页面中可以拖拽滑动。movable-view必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。 movable-viewmovable-area是 movable-view的可移动区域。

对于movab-area：

对于movable-view：

                       2.基础组件：

2.1 图标组件：icon

2.2 富文本组件：rich-text

2.3 文本组件：text

注意事项：

1. 内联文本只能用 text 组件，不能用 view，如 <text> foo <text>bar</text> </text>
2. 新增 span 组件用于内联文本和图片，如 <span> <image> </image> <text>bar</text> </span>。
3. decode可以解析的有   < > & '    
4. tip: 各个操作系统的空格标准并不一致。
5. tip:text 组件内只支持 text 嵌套。
6. tip: 除了文本节点以外的其他节点都无法长按选中

 2.4 进度条组件：progress

先总结到这里，后续还有表单组件等每天再补充！！！！