微信小程序官方组件解读和分析：一、view（视图容器 ）_移动开发_编程开发_程序员俱乐部

view组件说明:
    视图容器
    跟HTML代码中的DIV一样，可以包裹其他的组件，也可以被包裹在其他的组件内部。用起来比较自由随意，没有固定的结构。

view组件的用法：

class="zoom" src="/Upload/Images/2017032905/F52A93805740D40D.png" alt="" width="320"> 

示例项目的wxml代码：

[XML] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <view  class="btnGroup">         <view class="item orange" >退格</view>         <view class="item orange" >清屏</view>         <view class="item orange" >+/-</view>         <view class="item orange" >+</view>       </view>       <view  class="btnGroup">         <view class="item blue" >9</view>         <view class="item blue" >8</view>         <view class="item blue" >7</view>         <view class="item orange" >-</view>       </view>       <view  class="btnGroup">         <view class="item blue" >6</view>         <view class="item blue" >5</view>         <view class="item blue" >4</view>         <view class="item orange" >×</view>       </view>       <view  class="btnGroup">         <view class="item blue" >3</view>         <view class="item blue" >2</view>         <view class="item blue" >1</view>         <view class="item orange" >÷</view>       </view>       <view  class="btnGroup">         <view class="item blue" >0</view>         <view class="item blue" >.</view>         <view class="item blue" >历史</view>         <view class="item orange" >=</view>       </view>

示例项目的WXSS代码：

[CSS] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 .btnGroup{     display:flex;     flex-direction:row; } .orange{     color: #fef4e9;     border: solid 1px #da7c0c;     background: #f78d1d; } .blue{     color: #d9eef7;     border: solid 1px #0076a3;     background: #0095cd; }

视图样式flex-direction: row的效果图：
 
WXML代码如下

[XML] 纯文本查看 复制代码 ? 1 2 3 4 5 <view class="flex-wrp">     <view class="flex-item red" ></view>     <view class="flex-item green" ></view>     <view class="flex-item blue" ></view> </view>

WXSS代码如下：

[CSS] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 .flex-wrp{     height: 100px;     display:flex;     background-color: #FFFFFF; } .flex-item{     width: 100px;     height: 100px; } .red{     background: red; } .green{     background: green; } .blue{     background: blue; }

视图样式flex-direction: column的效果图：
 


WXML代码如下：

[XML] 纯文本查看 复制代码 ? 1 2 3 4 5 <view class="flex-wrp column">     <view class="flex-item" style="background: red"></view>     <view class="flex-item" style="background: green"></view>     <view class="flex-item" style="background: blue"></view> </view>

WXSS代码如下：

[CSS] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 .column{    flex-direction:column; } .flex-item{     width: 100px;     height: 100px; } .flex-wrp{     height: 100px;     display:flex;     background-color: #FFFFFF; } .red{     background: red; } .green{     background: green; } .blue{     background: blue; }

视图样式justify-content: flex-start的效果图：
DBAADFC334.png" alt="" width="372"> 

WXML代码如下：

[XML] 纯文本查看 复制代码 ? 1 2 3 4 5 <view class="flex-wrp flex-start">     <view class="flex-item" style="background: red"></view>     <view class="flex-item" style="background: green"></view>     <view class="flex-item" style="background: blue"></view> </view>

WXSS代码如下：

[CSS] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 .flex-start{     flex-direction:row;     justify-content: flex-start; } .flex-wrp{     height: 100px;     display:flex;     background-color: #FFFFFF; } .flex-item{     width: 100px;     height: 100px; } .red{     background: red; } .green{     background: green; } .blue{     background: blue; }

视图样式justify-content: flex-end的效果图：
 

WXML代码如下：

[XML] 纯文本查看 复制代码 ? 1 2 3 4 5 <view class="flex-wrp flex-end">     <view class="flex-item" style="background: red"></view>     <view class="flex-item" style="background: green"></view>     <view class="flex-item" style="background: blue"></view> </view>

WXSS代码如下：

[CSS] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 .flex-end{     flex-direction:row;     justify-content: flex-end; } .flex-wrp{     height: 100px;     display:flex;     background-color: #FFFFFF; } .flex-item{     width: 100px;     height: 100px; } .red{     background: red; } .green{     background: green; } .blue{     background: blue; }

视图样式justify-content: center的效果图：
 

WXML代码如下：

[XML] 纯文本查看 复制代码 ? 1 2 3 4 5 <view class="flex-wrp justify-content-center">     <view class="flex-item" style="background: red"></view>     <view class="flex-item" style="background: green"></view>     <view class="flex-item" style="background: blue"></view> </view>

WXSS代码如下：

[CSS] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 .justify-content-center{     flex-direction:row;     justify-content: center; } .flex-wrp{     height: 100px;     display:flex;     background-color: #FFFFFF; } .flex-item{     width: 100px;     height: 100px; } .red{     background: red; } .green{     background: green; } .blue{     background: blue; }

视图样式justify-content: space-between的效果图：
 

WXML代码如下：

[XML] 纯文本查看 复制代码 ? 1 2 3 4 5 <view class="flex-wrp space-between">   <view class="flex-item" style="background: red"></view>   <view class="flex-item" style="background: green"></view>   <view class="flex-item" style="background: blue"></view> </view>

WXSS代码如下：

[CSS] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 .space-between{   flex-direction:row;   justify-content: space-between; } .flex-wrp{   height: 100px;   display:flex;   background-color: #FFFFFF; } .flex-item{   width: 100px;   height: 100px; } .red{   background: red; } .green{   background: green; } .blue{   background: blue; }

视图样式justify-content: space-around的效果图：
 

WXML代码如下：

[XML] 纯文本查看 复制代码 ? 1 2 3 4 5 <view class="flex-wrp space-around">     <view class="flex-item" style="background: red"></view>     <view class="flex-item" style="background: green"></view>     <view class="flex-item" style="background: blue"></view> </view>

WXSS代码如下：

[CSS] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 .space-around{     flex-direction:row;     justify-content: space-around; } .flex-wrp{     height: 100px;     display:flex;     background-color: #FFFFFF; } .flex-item{     width: 100px;     height: 100px; } .red{     background: red; } .green{     background: green; } .blue{     background: blue; }

视图样式align-items: flex-end的效果图：
 

WXML代码如下：

[XML] 纯文本查看 复制代码 ? 1 2 3 4 5 <view class="flex-wrp align-items-flex-end">     <view class="flex-item" style="background: red"></view>     <view class="flex-item" style="background: green"></view>     <view class="flex-item" style="background: blue"></view> </view>

WXSS代码如下：

[CSS] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 .align-items-flex-end{     height: 200px;     flex-direction:row;     justify-content: center;     align-items: flex-end; } .flex-wrp{     height: 100px;     display:flex;     background-color: #FFFFFF; } .flex-item{     width: 100px;     height: 100px; } .red{     background: red; } .green{     background: green; } .blue{     background: blue; }

视图样式align-items: center的效果图：
 

WXML代码如下：

[XML] 纯文本查看 复制代码 ? 1 2 3 4 5 <view class="flex-wrp align-items-center">     <view class="flex-item" style="background: red"></view>     <view class="flex-item" style="background: green"></view>     <view class="flex-item" style="background: blue"></view> </view>

WXSS代码如下：

[CSS] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 .align-items-center{     height: 200px;     flex-direction:row;     justify-content: center;     align-items: center; } .flex-wrp{     height: 100px;     display:flex;     background-color: #FFFFFF; } .flex-item{     width: 100px;     height: 100px; } .red{     background: red; } .green{     background: green; } .blue{     background: blue; }

视图样式align-items: flex-start的效果图：
 
WXML代码如下：

[XML] 纯文本查看 复制代码 ? 1 2 3 4 5 <view class="flex-wrp align-items-flex-start">     <view class="flex-item" style="background: red"></view>     <view class="flex-item" style="background: green"></view>     <view class="flex-item" style="background: blue"></view> </view>

WXSS代码如下：

[CSS] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 .align-items-flex-start{     height: 200px;     flex-direction:row;     justify-content: center;     align-items: flex-start; } .flex-wrp{     height: 100px;     display:flex;     background-color: #FFFFFF; } .flex-item{     width: 100px;     height: 100px; } .red{     background: red; } .green{     background: green; } .blue{     background: blue; }

主要属性：

排列方式（flex-direction），用于wxss

属性 描述 row 横向排列 column 纵向排列

弹性项目内容对齐（justify-content），用于wxss

属性 描述 flex-start 弹性项目向行头紧挨着填充 flex-end 弹性项目向行尾紧挨着填充 center 弹性项目居中紧挨着填充 space-between 弹性项目平均分布在该行上 space-around 弹性项目平均分布在该行上，两边留有一半的间隔空间

项目在容器内侧轴方位的对齐方式（align-items），用于wxss

 

属性 描述 stretch 默认值，弹性项目被拉伸以适应容器 center 弹性项目位于容器的中心 flex-start 弹性项目位于容器的开头 flex-end 弹性项目位于容器的结尾 baseline 弹性项目位于容器的基线上

点击查看原文