全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[宁夏seo排名公司]微信小程序应该如何布局

  1:Flex布局

  

Flex布局如图1所示

  

 

  

图1

  

1.1 Flex容器属性

  

 

  

1.2 Flex容器内元素属性

  

 

  

align如果定义会覆写掉容器属性中的justify-content,青铜峡市小程序制作公司align-items设置的属性

  

微信小程序开发工程中,新建文件layout,然后新建各种文件(以layout命名)…•▽◇,

  

在layout○▼▲.wxml中加入如下代码-▲:

  

<view class="◆▽■◇;container1"▽▪◁;>
 <★◁;view class="item1">
 1
 </view>
<view class="item1">▽▲=;
 2
 </view>
 <view class="item1"■…▼◆;>
 3
 </view>
 <…=;view class="item1">◁◁;
 4
 <▽•▽◇;/view>
<□▲•☆;/view>△▷;

在layout.wxss中加入如下代码:

  

▽□•▽.container1{
 height: 100%■▽…•;
 width:100%▽…○;
 background-color:beige;
}
■☆▷.item1{
 height:100rpx;
 width:100rpx□◁□;
 background-color○▽:cyan●▪★□;
 border□◁-: 1px solid #fff
}

编译运行如图2所示

  

注:上述代码中在container1容器中加入了4个子元素view(item1)■◁△▽,item1的样式文件中设置每个item1的宽高为固定值:100rpx☆◇◆,rpx为与屏幕尺寸相关缩放的单位▪-○,不同于固定的px,每个item1的边为1px,实线(soliod)▼-,白色(#fff)

  

 

  

图2

  

修改▼◁☆▷.container1如下:(增加display=○…△:flex●■;)编译运行如图3所示▪◆:可以看出flex布局为默认横向排列元素

  

◇▽★.container1{
 height: 100%;
 width■▼•:100%;
 background-color:beige…=▪☆;
 display▷■◁:flex;
}

 

  

图3

  

1△▼☆.1.1 容器属性▲○: flex-direction

  

在.container1增加如下代码:表示设置flex布局纵向排列元素(从左到右为交叉轴,从上到下为主轴),如图2所示。(row□▷:flex布局横向排列元素---从左到右为主轴,从上到下为交叉轴)

  

 flex-direction:column

1.1▪□●•.2 容器属性=-•: flex-wrap

  

在.container1增加如下代码:同时在layout.wxml中复制元素代码到8个元素view,编译运行☆-▽■,效果如图4所示,可以看出本来高宽为100rpx,正方形的view已经变形为长方形◆▪★=。

  

flex-wrap:nowrap

 

  

图4

  

如果修改为如下代码:编译运行如图5所示…▲:保证每个子view都是正方形,09 2020.10 [荆门seo公司皆选久澳]5种你一定不知道的HTML空格表示方法 HTML提供了5种空格实体(space entity) ,它们拥有不同的宽度,非断行空格是常规空格的宽度,可运行于所有主流浏览器。 [衡水seo公司首选久澳]实例汇总JS call()及apply()的方法使用 !其介休市小程序制作公司然后放不下的第8个子view放到下一行

  

flex-wrap:wrap

 

  

图5

  

1.1.3容器属性: 
flex-flow

flex-flow: wrap row●▼•,编译运行结果△•★◆:如图5所示◆▪■,flex-flow相当于 flex-direction和flex-wrap两个属性的组合

  

1.1.4容器属性●▪:justify-content

在▲…=.container1增加如下代码:编译运行如图6所示。表示在主轴上的对齐方式,由于上面代码我们设置flex-flow: wrap row---相当于主轴为从左到右,所以一行显示不下的第8个元素在下一行居中显示,而前七个子view,也在一行中居中显示,左右两侧就有空白留边

  

justify-content◁■▼▼:center

 

  

图6

  

justify-content:flex-end (主轴为左到右情况下:右对齐)

编译运行效果如图7所示:

  

 

  

图7

  

justify-content▲●…:flex-start (主轴为左到右情况下:左对齐)不举例显示了
justify-content◁○☆:space-around---效果如图8所示,每个子view左右都有留边

 

  

图8

  

justify-content:space-between---
效果如图9所示,每个子view左右都有留边◇□○,但是首尾两个view各自左右对齐不留边

 

  


图9

  

1.1=■•.5容器属性:align-items

上面已经很详细讲解主轴上的对齐方式,这里关于这个交叉轴上的对齐方式同理很简单,就不详细展开了。

  

1○◇….2.1 容器内元素属性:flex-grow

layout.wxml中修改代码如下:增加i3

  

 <◆▼;view class="•△•★;item1 i3">
 3
 </view>

layout.wxss中修改代码如下▽▲•:在item1中增加◁▲•: flex-grow•▼: 1,增加i3,表示在一行中如果有剩余空间的话,i3之外的子view占1份空间,而i3子view占2份空间,编译运行效果如图10所示:可以看出i3view所占据的空间比其余3个子view大▷◇,但是没有到2倍

  

.item1{
 height:100rpx=◆◆;
 width:100rpx;
 background-color:cyan●▷-;
 border▽○•: 1px solid #fff;
 flex-grow: 1
}
.i3{
 flex-grow: 2
}

 

  

图10

  


1.2.2容器内元素属性:flex-shrink

layout◆◇▷.wxml再增加4个子view

  

layout.wxss中修改代码如下:i3的flex-shrink为0,其余子view为1,这表示当空间不足时所有子view都等比缩小,但是i3的view保持大小不变,编译运行,效果如图11所示

  

.item1{
 height:100rpx;
 width:100rpx◆★;
 background-color☆★:cyan;
 border: 1px solid #fff;
 flex-shrink: 1
}
.i3{
 flex-shrink: 0
}

 

  

图11

  

1.2☆▼◆▷.3容器内元素属性:
flex-basis

layout.wxss中修改代码如下:其他代码保持不变不变=○▼★,编译运行,效果如图12所示

  

.i3{ flex-shrink▲▲: 0=○▪…; flex-basis: 200rpx
}

 

  

图12

  

1△★.2.4容器内元素属性☆▲▷:
flex

flex是grow,凯里市小程序制作公司shink,basis几个属性的合并,[宁夏seo排名公司]layout.wxss中修改代码如下:其他代码保持不变不变▲=○,编译运行,效果和图12保持一样

  

△△.i3{ flex●▲◆●:0 0 200rpx}
1.2.5容器内元素属性:order

layout.wxml中修改代码如下•☆★□:设置每个view的order属性为其显示的顺序•☆▷,编译运行

  

<view class="▪▽•◁;container1">
 <view class="item1" style="order:4"△…;>■☆▼◆;
 1
 </view>
<•▽★;view class="item1" style="□▷-☆;order:3">
 2
 </view>
 <view class="item1 i3" style="□▪▷-;order:2"●-○;>…=☆;
 3
 <◆○…;/view>=■;
 <view class="item1" style="•▽…△;order:1"=……▲;>●■◇;
 4
 </view>
</view>▷▽▼★;

相信看了本文案例你已经掌握了方法△◆=■,更多精彩请关注久澳传媒编程栏目其它相关文章!

  

推荐阅读▽▪▷▽:

  

微信小程序开发中怎样实现地址页面三级联动
 

  

新手怎样开发第一款微信小程序

  以上就是微信小程序应该如何布局的详细内容,更多请关注久澳传媒编程栏目其它相关文章!

[宁夏seo排名公司]微信小程序应该如何布局

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。