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

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

视图容器

.bc_green{
background: green;
}

.bc_red{
background: red;
}

.bc_blue{
background: blue;
}

图片

.bc_green{
background: green;
}

.bc_red{
background: red;
}

.bc_blue{
background: blue;
}

图片

.bc_green{
background: green;
}

.bc_red{
background: red;
}

.bc_blue{
background: blue;
}

.bc_green{
background: green;
}

.bc_red{
background: red;
}

.bc_blue{
background: blue;
}

.bc_green{
background: green;
}

.bc_red{
background: red;
}

.bc_blue{
background: blue;
}

.bc_green{
background: green;
}

.bc_red{
background: red;
}

.bc_blue{
background: blue;
}

.bc_green{
background: green;
}

.bc_red{
background: red;
}

.bc_blue{
background: blue;
}

.bc_green{
background: green;
}

.bc_red{
background: red;
}

.bc_blue{
background: blue;
}

属性

排列方式(flex-direction) 描述

项目内容对齐（justify-content）描述

源码

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

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

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

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

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

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

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

.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

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

原文链接：https://www.f2er.com/js/30841.html

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

属性

猜你在找的JavaScript相关文章