大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

「小程序JAVA实战」小程序的flex布局(22)-创新互联

之前已经把小程序的框架说完了,接下来说说小程序的组件,在说组件之前,先说说布局吧。源码:https://github.com/limingios/wxProgram.git 中的No.9

网站建设哪家好,找创新互联!专注于网页设计、网站建设、微信开发、微信平台小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了永善免费建站欢迎大家使用!

「小程序JAVA实战」小程序的flex布局(22)

小程序的flex布局

  • 小程序建议使用flex布局进行排版
    >其实div+css的方式也可以,只是官方建议使用flex布局的方式

  • flex 就是一个盒装弹性布局

  • flex是一个容器,所有的子元素都是它的成员。

整个是一个大盒子,大盒子里面有很多的小块a,b,c,d,e,f都是他的成员,针对其中的成员可以增加对应的样式,可以看出来a,b,d是比较大的,c是最小的,我们可以通过样式控制它们的大小,我们也可以通过order的方式控制他们的位置顺序,一般正常的咱们的页面都有顺序的,可以通过布局的order属性,把顺序给展示出来。

  • 定义布局display:flex

  • flex 容器的属性
    flex-direction:排列方向
    flex-wrap:换行规则
    justify-content:对齐方式

flex-direction

容器内的方向,方向可以从上到下,从左到右。

  • row[flex-direction 默认布局方式]

    从左到右

  • row-reverse

    从右到左

  • column

    从上到下

  • column-reverse

    从下到上

  • 演示
    flex-direction.wxml



  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;
}

「小程序JAVA实战」小程序的flex布局(22)

flex-wrap

容器换行的属性,分别是不换行,换行,逆向换行

  • nowrap[flex-nowwrap 默认不换行]

    不换行

  • wrap

    换行

  • wrap-reverse

    逆向换行

  • 演示
    container-wrap.wxml



  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;
}

「小程序JAVA实战」小程序的flex布局(22)

flex-wrap

靠那个方向对齐的一个属性

  • flex-start[flex-start 默认左对齐]

    左对齐

  • flex-end

    向右对齐

  • center【使用最多的方式】

    居中对齐

  • space-around

    在成员元素周围包裹空格

  • space-between

    在成员元素之前留空白

  • 演示
    justify-content.wxml



  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;
}

「小程序JAVA实战」小程序的flex布局(22)

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;
}

「小程序JAVA实战」小程序的flex布局(22)

PS:flex布局基本说完了,基本也给各种场景下的属性含义直观的方式进行了演示,但是老铁虽然我搞完了,但是你们如果想学小程序还是勤加练习的,好脑子不如烂笔头对吧!

>>原创文章,欢迎转载。转载请注明:转载自IT人故事会,谢谢!
>>原文链接地址:「小程序JAVA实战」小程序的flex布局(22)

另外有需要云服务器可以了解下创新互联cdcxhl.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网站名称:「小程序JAVA实战」小程序的flex布局(22)-创新互联
文章URL:http://dzwzjz.com/article/depjdo.html
在线咨询
服务热线
服务热线:028-86922220
TOP