小程序开发基础-view视图容器

喜欢ヅ旅行 2021-09-16 03:38 407阅读 0赞

![标题图][1240]

## view ##

视图容器。

// wxss
    .flex-wrp_one{
      display: flex;
      flex-direction: row;
    }
    .flex-item{
      width: 100px;
      height: 100px;
    }
    
    .bc_green{
      background: green;
    }
    
    .bc_red{
      background: red;
    }
    
    .bc_blue{
      background: blue;
    }

![图片][1240 1]

// wxml
    <view class="section">
      <view class="section__title">flex-direction: column</view>
      <view class="flex-wrp_two">
        <view class="flex-item bc_green">1</view>
        <view class="flex-item bc_red">2</view>
        <view class="flex-item bc_blue">3</view>
      </view>
    </view>

// wxss
    .flex-wrp_two{
      display: flex;
      flex-direction: column;
    }
    .flex-item{
      width: 100px;
      height: 100px;
    }
    
    .bc_green{
      background: green;
    }
    
    .bc_red{
      background: red;
    }
    
    .bc_blue{
      background: blue;
    }

![图片][1240 2]

// wxml
    <view class="section">
      <view class="section__title">justify-content: flex-start</view>
      <view class="flex-wrp_three">
        <view class="flex-item bc_green">1</view>
        <view class="flex-item bc_red">2</view>
        <view class="flex-item bc_blue">3</view>
      </view>
    </view>

// wxss 
    .flex-wrp_three{
      display: flex;
      justify-content: flex-start;
    }
    .flex-item{
      width: 100px;
      height: 100px;
    }
    
    .bc_green{
      background: green;
    }
    
    .bc_red{
      background: red;
    }
    
    .bc_blue{
      background: blue;
    }

![view][]

// wxml
    <view class="section">
      <view class="section__title">justify-content: flex-end</view>
      <view class="flex-wrp_four">
        <view class="flex-item bc_green">1</view>
        <view class="flex-item bc_red">2</view>
        <view class="flex-item bc_blue">3</view>
      </view>
    </view>

// wxss
    .flex-wrp_four{
      display: flex;
      justify-content: flex-end;
    }
    .flex-item{
      width: 100px;
      height: 100px;
    }
    
    .bc_green{
      background: green;
    }
    
    .bc_red{
      background: red;
    }
    
    .bc_blue{
      background: blue;
    }

![view][view 1]

// wxml
    <view class="section">
      <view class="section__title">justify-content: center</view>
      <view class="flex-wrp_five">
        <view class="flex-item bc_green">1</view>
        <view class="flex-item bc_red">2</view>
        <view class="flex-item bc_blue">3</view>
      </view>
    </view>

// wxss
    .flex-wrp_five{
      display: flex;
      justify-content: center;
    }
    .flex-item{
      width: 100px;
      height: 100px;
    }
    
    .bc_green{
      background: green;
    }
    
    .bc_red{
      background: red;
    }
    
    .bc_blue{
      background: blue;
    }

![view][view 2]

// wxml
    <view class="section">
      <view class="section__title">justify-content: space-between</view>
      <view class="flex-wrp_six">
        <view class="flex-item bc_green">1</view>
        <view class="flex-item bc_red">2</view>
        <view class="flex-item bc_blue">3</view>
      </view>
    </view>

// wxss
    .flex-wrp_six{
      display: flex;
      justify-content: space-between;
    }
    .flex-item{
      width: 100px;
      height: 100px;
    }
    
    .bc_green{
      background: green;
    }
    
    .bc_red{
      background: red;
    }
    
    .bc_blue{
      background: blue;
    }

![view][view 3]

// wxml
    <view class="section">
      <view class="section__title">justify-content: space-around</view>
      <view class="flex-wrp_seven">
        <view class="flex-item bc_green">1</view>
        <view class="flex-item bc_red">2</view>
        <view class="flex-item bc_blue">3</view>
      </view>
    </view>

// wxss
    .flex-wrp_seven{
      display: flex;
      justify-content: space-around;
    }
    .flex-item{
      width: 100px;
      height: 100px;
    }
    
    .bc_green{
      background: green;
    }
    
    .bc_red{
      background: red;
    }
    
    .bc_blue{
      background: blue;
    }

![view][view 4]

// wxml
    <view class="section">
      <view class="section__title">justify-content: space-evenly</view>
      <view class="flex-wrp_eight">
        <view class="flex-item bc_green">1</view>
        <view class="flex-item bc_red">2</view>
        <view class="flex-item bc_blue">3</view>
      </view>
    </view>

// wxss
    .flex-wrp_eight{
      display: flex;
      justify-content: space-evenly;
    }
    .flex-item{
      width: 100px;
      height: 100px;
    }
    
    .bc_green{
      background: green;
    }
    
    .bc_red{
      background: red;
    }
    
    .bc_blue{
      background: blue;
    }

![view][view 5]

## 属性 ##

<table> 
 <thead> 
  <tr> 
   <th>排列方式(flex-direction)</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>row</td> 
   <td>横向排列</td> 
  </tr> 
  <tr> 
   <td>column</td> 
   <td>纵向排列</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th>项目内容对齐（justify-content）</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>flex-start</td> 
   <td>向行头紧挨</td> 
  </tr> 
  <tr> 
   <td>flex-end</td> 
   <td>向行尾紧挨</td> 
  </tr> 
  <tr> 
   <td>center</td> 
   <td>居中紧挨</td> 
  </tr> 
  <tr> 
   <td>space-between</td> 
   <td>平均分布</td> 
  </tr> 
  <tr> 
   <td>space-around</td> 
   <td>平均分布 ,两边留有一半间隔</td> 
  </tr> 
  <tr> 
   <td>space-evenly</td> 
   <td>两边间隔与中间相同</td> 
  </tr> 
 </tbody> 
</table>

## 源码 ##

// wxml
    <view class="section">
      <view class="section__title">flex-direction: row</view>
      <view class="flex-wrp_one">
        <view class="flex-item bc_green">1</view>
        <view class="flex-item bc_red">2</view>
        <view class="flex-item bc_blue">3</view>
      </view>
    </view>
    
    <view class="section">
      <view class="section__title">flex-direction: column</view>
      <view class="flex-wrp_two">
        <view class="flex-item bc_green">1</view>
        <view class="flex-item bc_red">2</view>
        <view class="flex-item bc_blue">3</view>
      </view>
    </view>
    
    <view class="section">
      <view class="section__title">justify-content: flex-start</view>
      <view class="flex-wrp_three">
        <view class="flex-item bc_green">1</view>
        <view class="flex-item bc_red">2</view>
        <view class="flex-item bc_blue">3</view>
      </view>
    </view>
    
    <view class="section">
      <view class="section__title">justify-content: flex-end</view>
      <view class="flex-wrp_four">
        <view class="flex-item bc_green">1</view>
        <view class="flex-item bc_red">2</view>
        <view class="flex-item bc_blue">3</view>
      </view>
    </view>
    
    <view class="section">
      <view class="section__title">justify-content: center</view>
      <view class="flex-wrp_five">
        <view class="flex-item bc_green">1</view>
        <view class="flex-item bc_red">2</view>
        <view class="flex-item bc_blue">3</view>
      </view>
    </view>
    
    <view class="section">
      <view class="section__title">justify-content: space-between</view>
      <view class="flex-wrp_six">
        <view class="flex-item bc_green">1</view>
        <view class="flex-item bc_red">2</view>
        <view class="flex-item bc_blue">3</view>
      </view>
    </view>
    
    <view class="section">
      <view class="section__title">justify-content: space-around</view>
      <view class="flex-wrp_seven">
        <view class="flex-item bc_green">1</view>
        <view class="flex-item bc_red">2</view>
        <view class="flex-item bc_blue">3</view>
      </view>
    </view>
    
    <view class="section">
      <view class="section__title">justify-content: space-evenly</view>
      <view class="flex-wrp_eight">
        <view class="flex-item bc_green">1</view>
        <view class="flex-item bc_red">2</view>
        <view class="flex-item bc_blue">3</view>
      </view>
    </view>

// wxss
    .flex-wrp_one{
      display: flex;
      flex-direction: row;
    }
    
    .flex-wrp_two{
      display: flex;
      flex-direction: column;
    }
    
    .flex-wrp_three{
      display: flex;
      justify-content: flex-start;
    }
    
    .flex-wrp_four{
      display: flex;
      justify-content: flex-end;
    }
    
    .flex-wrp_five{
      display: flex;
      justify-content: center;
    }
    
    .flex-wrp_six{
      display: flex;
      justify-content: space-between;
    }
    
    .flex-wrp_seven{
      display: flex;
      justify-content: space-around;
    }
    
    .flex-wrp_eight{
      display: flex;
      justify-content: space-evenly;
    }
    
    .flex-item{
      width: 100px;
      height: 100px;
    }
    
    .bc_green{
      background: green;
    }
    
    .bc_red{
      background: red;
    }
    
    .bc_blue{
      background: blue;
    }

## 开源github分享 ##

**[Wechat\_small\_program\_Share][Wechat_small_program_Share]**  
微信小程序分享��  
Github 欢迎 Star、Fork

## 结语 ##

*  本文主要讲解 **小程序开发基础-view视图容器**
 *  下面我将继续对其他知识 深入讲解 ，有兴趣可以继续关注
 *  小礼物走一走 or 点赞

![送❤][1240 3]

[1240]: /images/20210724/6e641c38d18d4984909357080a23cd5f.png
[1240 1]: /images/20210724/6e602648850d416bb36f0cb1aae73d5f.png
[1240 2]: /images/20210724/27655039120b456d9aa2cd16ccaa317e.png
[view]: /images/20210724/9d4d26f120944f4f87604c9e6f4ff2ec.png
[view 1]: /images/20210724/c36f3ccda1ec4355873311423c44a761.png
[view 2]: /images/20210724/d43378bf752148e3b35a817b0a14a66b.png
[view 3]: /images/20210724/07400e8c4d954a38a5b2aa4fc4822feb.png
[view 4]: /images/20210724/e3d1e628b470415db5f2d085513818e4.png
[view 5]: /images/20210724/ab9c50050e734f898ba8da44e733e169.png
[Wechat_small_program_Share]: https://github.com/huangguangda/Wechat_small_program_Share
[1240 3]: /images/20210724/f8b718437962456d8b5a5b963616de52.png