点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

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

来源：动视网责编：小采时间：2020-11-27 22:09:33

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

小程序开发基础之view视图容器:本文介绍了小程序开发基础之view视图容器，分享给大家，具体如下：视图容器 // wxml <view class=section> <view class=section__title>flex-direction: row</view> <view class=fl

推荐度：

点击下载本文 文档为doc格式

导读小程序开发基础之view视图容器:本文介绍了小程序开发基础之view视图容器，分享给大家，具体如下：视图容器 // wxml <view class=section> <view class=section__title>flex-direction: row</view> <view class=fl

本文介绍了小程序开发基础之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

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

推荐度：

点击下载本文 文档为doc格式

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

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐