之前已经把小程序的框架说完了，接下来说说小程序的组件，在说组件之前，先说说布局吧。源码：https://github.com/limingios/wxProgram.git 中的No.9
在成都网站设计、成都网站制作、外贸网站建设中从网站色彩、结构布局、栏目设置、关键词群组等细微处着手，突出企业的产品/服务/品牌，帮助企业锁定精准用户，提高在线咨询和转化，使成都网站营销成为有效果、有回报的无锡营销推广。创新互联专业成都网站建设10余年了，客户满意度97.8%，欢迎成都创新互联客户联系。
.jpg)
小程序的flex布局
整个是一个大盒子，大盒子里面有很多的小块a，b，c，d，e，f都是他的成员，针对其中的成员可以增加对应的样式，可以看出来a，b，d是比较大的，c是最小的，我们可以通过样式控制它们的大小，我们也可以通过order的方式控制他们的位置顺序，一般正常的咱们的页面都有顺序的，可以通过布局的order属性，把顺序给展示出来。
flex-direction
容器内的方向，方向可以从上到下，从左到右。
a
b
c
d
e
a
b
c
d
e
a
b
c
d
e
a
b
c
d
e
flex-direction.wxss
.container-row{
display: flex;
flex-direction: row;
}
.container-row-reverse{
display: flex;
flex-direction: row-reverse;
}
.container-column{
display: flex;
flex-direction: column;
}
.container-column-reverse{
display: flex;
flex-direction: column-reverse;
}
.size{
width: 200rpx;
height: 150rpx;
}
.a {
background: red;
}
.b {
background: yellow;
}
.c {
background: blue;
}
.d {
background: green;
}
.e {
background: gold;
}
flex-wrap
容器换行的属性，分别是不换行，换行，逆向换行
a
b
c
d
e
欢迎访问我的个人网站：idig8.com
公众号：编程坑太多
a
b
c
d
e
欢迎访问我的个人网站：idig8.com
公众号：编程坑太多
a
b
c
d
e
flex-wrap.wxss
.container-nowrap{
display: flex;
flex-wrap: nowrap;
}
.container-wrap{
display: flex;
flex-wrap: wrap;
}
.container-wrap-reverse{
display: flex;
flex-wrap: wrap-reverse;
}
.size{
width: 200rpx;
height: 150rpx;
}
.a {
background: red;
}
.b {
background: yellow;
}
.c {
background: blue;
}
.d {
background: green;
}
.e {
background: gold;
}
flex-wrap
靠那个方向对齐的一个属性
a
b
c
d
e
欢迎访问我的个人网站：idig8.com
公众号：编程坑太多
a
b
c
d
e
欢迎访问我的个人网站：idig8.com
公众号：编程坑太多
a
b
c
d
e
欢迎访问我的个人网站：idig8.com
公众号：编程坑太多
a
b
c
d
e
欢迎访问我的个人网站：idig8.com
公众号：编程坑太多
a
b
c
d
e
justify-content.wxss
.container-flex-start{
display: flex;
justify-content: flex-start;
}
.container-flex-end{
display: flex;
justify-content: flex-end;
}
.container-center{
display: flex;
justify-content: flex-center;
}
.container-space-around{
display: flex;
justify-content: space-around;
}
.container-space-between{
display: flex;
justify-content: space-between;
}
.size{
width: 50rpx;
height: 150rpx;
}
.a {
background: red;
}
.b {
background: yellow;
}
.c {
background: blue;
}
.d {
background: green;
}
.e {
background: gold;
}
flex成员元素的样式设置
顺序和比例分配
order
通过数字对flex容器内部的成员设置显示的顺序
flex
设置每个成员所占行级的显示比例
演示
order-flex.wxml
a
b
c
d
e
欢迎访问我的个人网站：idig8.com
公众号：编程坑太多
order-flex.wxss
.container{
display: flex;
justify-content: flex-start;
}
.size{
height: 150rpx;
}
.a {
background: red;
order:5;
flex:4;
}
.b {
background: yellow;
order:1;
flex:1;
}
.c {
background: blue;
order:3;
flex:2;
}
.d {
background: green;
order:32;
flex:3;
}
.e {
background: gold;
order:4;
flex:2;
}
PS：flex布局基本说完了，基本也给各种场景下的属性含义直观的方式进行了演示，但是老铁虽然我搞完了，但是你们如果想学小程序还是勤加练习的，好脑子不如烂笔头对吧！
>>原创文章，欢迎转载。转载请注明：转载自IT人故事会，谢谢！
>>原文链接地址：「小程序JAVA实战」小程序的flex布局（22）
新闻标题：「小程序JAVA实战」小程序的flex布局（22）
URL地址：
http://kswjz.com/article/ppepss.html
