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

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

源码

// wxml <view> <view>flex-direction: row</view> <view> <view>1</view> <view>2</view> <view>3</view> </view> </view> <view> <view>flex-direction: column</view> <view> <view>1</view> <view>2</view> <view>3</view> </view> </view> <view> <view>justify-content: flex-start</view> <view> <view>1</view> <view>2</view> <view>3</view> </view> </view> <view> <view>justify-content: flex-end</view> <view> <view>1</view> <view>2</view> <view>3</view> </view> </view> <view> <view>justify-content: center</view> <view> <view>1</view> <view>2</view> <view>3</view> </view> </view> <view> <view>justify-content: space-between</view> <view> <view>1</view> <view>2</view> <view>3</view> </view> </view> <view> <view>justify-content: space-around</view> <view> <view>1</view> <view>2</view> <view>3</view> </view> </view> <view> <view>justify-content: space-evenly</view> <view> <view>1</view> <view>2</view> <view>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

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

您可能感兴趣的文章: