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

本文介绍了小程序开发基础之view视图容器，分享给大家，具体如下：

视图容器

// 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> // 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; }

图片

// 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; }

图片

// 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

// 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

// 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

// 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

// 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

属性

排列方式(flex-direction) 描述 row 横向排列 column 纵向排列

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

源码

// 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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。