【微信小程序开发小白零基础入门】微信小程序框架演示【建议收藏】

移动开发 2022-03-23 11:06:02 阅读次数: 0

微信小程序框架演示

文章目录

一、容器属性

1.flex-direction的用法

flex-direction.wxml 
<view class='title'>1.flex-direction的用法</view>
<view class='myContainer'>
  <view class='demo'>云</view>
  <view class='demo'>慧</view>
  <view class='demo'>智</view>
</view>
flex-direction.wxss 
.myContainer {
    
    
  margin: 80rpx auto;
  width: 600rpx;
  height: 500rpx;
  border: 1px solid silver;
  display: flex;
  flex-direction: column-reverse; /*自行更换成row-reverse, column,column-reverse试试*/
}
.demo {
    
    
  width: 100px;
  height: 100rpx;
  line-height: 100rpx;
  margin: 15rpx; 
  text-align: center;
  background-color: lightgreen;
}

在这里插入图片描述

2.flex-wrap的用法

flex-wrap.wxml 
<view class='title'>2.flex-wrap的用法</view>
<view class='myContainer'>
  <view class='demo'>工</view>
  <view class='demo'>具</view>
  <view class='demo'>箱</view>
</view>
flex-wrap.wxss 
.myContainer {
    
    
  margin: 80rpx auto;
  width: 600rpx;
  height: 500rpx;
  border: 1px solid silver;
  display: flex;
  flex-direction: row; 
  flex-wrap:wrap;/*自行更换成nowrap, wrap-reverse试试*/
}
.demo {
    
    
  width: 100px;
  height: 100rpx;
  line-height: 100rpx;
  margin: 15rpx; 
  text-align: center;
  background-color: lightgreen;
}

在这里插入图片描述

3.justify-content的用法

justify-content.wxml 
<view class='title'>3.justify-content的用法</view>
<view class='myContainer'>
  <view class='demo'>智</view>
  <view class='demo'>慧</view>
  <view class='demo'>云</view>
</view>
justify-content.wxss 
.myContainer {
    
    
  margin: 80rpx auto;
  width: 600rpx;
  height: 500rpx;
  border: 1px solid silver;
  display: flex;
  flex-direction: row;
  justify-content: flex-start; /*换成 flex-end| center| space-between| space-around| space-evenly 试试*/
}

.demo {
    
    
  width: 50px;
  height: 100rpx;
  line-height: 100rpx;
  border: 1px solid;
  text-align: center;
  background-color: lightgreen;
}

在这里插入图片描述

4.align-items的用法

align-items.wxml 
<view class='title'>4.align-items的用法</view>
<view class='myContainer'>
  <view class='demo z'>智</view>
  <view class='demo h'>慧</view>
  <view class='demo y'>云</view>
</view>
align-items.wxss 
.myContainer {
    
    
  margin: 80rpx auto;
  width: 600rpx;
  height: 500rpx;
  border: 1px solid silver;
  display: flex;
  flex-direction: row; 
  align-items: flex-start;/*自行更换成stretch（默认值）| flex-start | center | flex-end | baseline试试*/
}

.demo {
    
    
  height: 100rpx;
  line-height: 100rpx;
  border: 1px solid;
  text-align: center;
  background-color: lightgreen;
}

/*如果align-items取值为stretch，请注释掉以下全部代码*/
.z{
    
    
  width: 200rpx;
}
.h{
    
    
  width: 300rpx;
}
.y{
    
    
  width: 400rpx;
}

在这里插入图片描述

5.align-content的用法

align-content.wxml 
<view class='title'>5.align-content的用法</view>
<view class='myContainer'>
  <view class='demo z'>智</view>
  <view class='demo h'>慧</view>
  <view class='demo y'>云</view>
  <view class='demo g'>工</view>
  <view class='demo j'>具</view>
  <view class='demo x'>箱</view>
</view>
align-content.wxss 
.myContainer {
    
    
  margin: 80rpx auto;
  width: 600rpx;
  height: 500rpx;
  border: 1px solid silver;
  display: flex;
  flex-direction: row; 
  flex-wrap: wrap;
  align-content: flex-start;/*自行更换成stretch（默认值） | flex-start | center | flex-end | space-between |space-around | space-evenly试试*/
}

.demo {
    
    
  height: 100rpx;/*如果align-items取值为stretch，请注释掉关于height的代码*/
  line-height: 100rpx;
  border: 1px solid;
  text-align: center;
  background-color: lightgreen;
}


.z{
    
    
  width: 200rpx;
}
.h{
    
    
  width: 300rpx;
}
.y{
    
    
  width: 400rpx;
}
.g{
    
    
  width: 200rpx;
}
.j{
    
    
  width: 300rpx;
}
.x{
    
    
  width: 400rpx;
}

在这里插入图片描述

二、项目属性

1.order的用法

order.wxml 
<view class='title'>1.order的用法</view>
<view class='myContainer'>
  <view class='demo z'>智</view>
  <view class='demo h'>慧</view>
  <view class='demo y'>云</view>
</view>
order.wxss 
.myContainer {
    
    
  margin: 80rpx auto;
  width: 600rpx;
  height: 500rpx;
  border: 1px solid silver;
  display: flex;
  flex-direction: row; 
  flex-wrap:wrap;/*自行更换成nowrap, wrap-reverse试试*/
}
.demo {
    
    
  width: 50px;
  height: 100rpx;
  line-height: 100rpx;
  margin: 15rpx; 
  text-align: center;
  background-color: lightgreen;
}

.z{
    
    
  order: 6;
}
.h{
    
    
  order: -1;
}
.y{
    
    
  order: 2
}

在这里插入图片描述

2.flex-shrink的用法

flex-shrink.wxml 
<view class='title'>2.flex-shrink的用法</view>
<view class='myContainer'>
  <view class='demo z'>智</view>
  <view class='demo h'>慧</view>
  <view class='demo y'>云</view>
  <view class='demo g'>工</view>
  <view class='demo j'>具</view>
  <view class='demo x'>箱</view>
</view>
flex-shrink.wxss 
.myContainer {
    
    
  margin: 80rpx auto;
  width: 500rpx;
  height: 500rpx;
  border: 1px solid silver;
  display: flex;
  flex-direction: row; 
}
.demo {
    
    
  height: 100rpx;
  line-height: 100rpx;
  border: 1px solid;
  text-align: center;
  background-color: lightgreen;
}

.z{
    
    
  width: 200rpx;
  flex: 1;
}
.h{
    
    
  width: 200rpx;
  flex: 2;
}
.y{
    
    
  width: 200rpx;
  flex: 3;
}
.g{
    
    
  width: 200rpx;
  flex: 1;
}
.j{
    
    
  width: 200rpx;
  flex: 2;
}
.x{
    
    
  width: 200rpx;
  flex: 3;
}

在这里插入图片描述

3.flex-grow的用法

flex-grow.wxml 
<view class='title'>3.flex-grow的用法</view>
<view class='myContainer'>
  <view class='demo z'>智</view>
  <view class='demo h'>慧</view>
  <view class='demo y'>云</view>
</view>
flex-grow.wxss 
.myContainer {
    
    
  margin: 80rpx auto;
  width: 600rpx;
  height: 500rpx;
  border: 1px solid silver;
  display: flex;
  flex-direction: row; 
}
.demo {
    
    
  height: 100rpx;
  line-height: 100rpx;
  border: 1px solid;
  text-align: center;
  background-color: lightgreen;
}

.z{
    
    
  width: 100rpx;
  flex-grow: 0;
}
.h{
    
    
  width: 100rpx;
  flex-grow: 1;
}
.y{
    
    
  width: 100rpx;
  flex-grow: 2;
}

在这里插入图片描述

4.flex-basis的用法

flex-basis.wxml 
<view class='title'>4.flex-basis的用法</view>
<view class='myContainer'>
  <view class='demo g'>工</view>
  <view class='demo j'>具</view>
  <view class='demo x'>箱</view>
</view>
flex-basis.wxss 
.myContainer {
    
    
  margin: 80rpx auto;
  width: 600rpx;
  height: 500rpx;
  border: 1px solid silver;
  display: flex;
  flex-direction: row; 
}
.demo {
    
    
  height: 100rpx;
  line-height: 100rpx;
  border: 1px solid;
  text-align: center;
  background-color: lightgreen;
}

.g{
    
    
  width: 100rpx;
  flex-grow: 0;
}
.j{
    
    
  width: 100rpx;
  flex-grow: 1;
}
.x{
    
    
  width: 100rpx;
  flex-grow: 2;
}

在这里插入图片描述

5.flex-self的用法

flex-self.wxml 
<view class='title'>5.align-self的用法</view>
<view class='myContainer'>
  <view class='demo y'>云</view>
  <view class='demo g'>工</view>
  <view class='demo j'>具</view>
  <view class='demo x'>箱</view>
</view>
flex-self.wxss 
.myContainer {
    
    
  margin: 80rpx auto;
  width: 500rpx;
  height: 500rpx;
  border: 1px solid silver;
  display: flex;
  flex-direction: row;
}

.demo {
    
    
  width: 100rpx;
  line-height: 100rpx;
  margin: 15rpx;
  text-align: center;
  background-color: lightgreen;
}

.y {
    
    
  height: 100rpx;
  align-self: flex-start;
}

.g {
    
    
  height: 100rpx;
  align-self: center;
}

.j {
    
    
  height: 100rpx;
  align-self: flex-end;
}

.x {
    
    
  align-self: stretch;
}

在这里插入图片描述

三、推荐小程序（欢迎各位大佬指导）

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_44967475/article/details/120613645
今日推荐
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
最强开源大模型 Llama 3 上架 Gitee AI
虽然老乡鸡开源的不是代码，但背后的原因却让人很暖心
富文本编辑器 Quill 2.0 重磅发布，特性、可靠性与开发者体验大幅提升
周排行
使用Redis中间件解决商品秒杀活动中出现的超卖问题（使用Java多线程模拟高并发环境）
野指针及c++指针使用注意点
redis 3.0　新特性
(翻译)火狐操作系统javascript API
微信小程序开发入门
mysql数据查询之五子句(where、group by、having、order by和limit)
Codeforces Round #517 Div. 1翻车记
在caffe 中实现Generative Adversarial Nets（二）
企业级漏洞扫描工具
java byte数组与String互转
每日归档
更多
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)
2024-04-16(70)
2024-04-15(42)
2024-04-14(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022