欢迎您光临深圳市书路景科技有限公司!深圳网站建设小程序开发公司,让您的企业赢在网络营销时代!
电话图标 服务热线:13380363740

资讯中心

将想法与焦点和您一起共享

微信小程序弹性盒布局flex

发表日期:2018-12 文章编辑:书路景科技 浏览次数:


display: -webkit-flex;说明使用弹性模式, 在微信中默认的排列方式水平。flex-direction: column更改排列方式垂直。在该模型下,不声明父容器宽高,默认占满均分。可以通过设置父容器的宽度或高度和子容器的flex的值实现按比例分配空间。弹性模式最大的好处就是适应性强。
  flex-direction: row/column;  //row横向  column纵向.
 
一、弹性盒子布局flex
小程序通过弹性盒子布局,兼容性最佳。在布局方面,尽可能减少左右浮动的使用,将弹性布局样式封装好,具有很大的实用性。下面为大家贴出较为常用的布局样式:
 
1.space-between左右布局
/* 左右布局 */
.space-between {
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
 
2.space-around等间距布局
/* 等间距布局 */
.space-around{
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
 
3.nowrap不换行
/* 不换行 */
.nowrap{
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
 
4.wrap换行
/* 换行 */
.wrap{
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;//如果需要进行自动换行,且执行左右或者等间距布局可以对justify-content属性进行控制,此外可以给定子盒子一定的宽度,就能实现float流式布局的效果
  justify-content: space-around;
}
wxml 文件如下:
<view class="section">
<view class="section__title">flex-direction: row</view>
<view class="flex-wrp" style="display:flex;flex-direction:row;justify-content: space-around;">
<view class="flex-item bc_green">1</view>
<view class="flex-item bc_red">2</view>
<view class="flex-item bc_blue">3</view>
</view>
</view>

 


(责任编辑:书路景网站建设 做网站公司)

全新网站设计案例
  • 我们能做什么

    致力于互联网品牌建设与网络推广营销,专业领域包括网站建设、网络推广、微信小程序、APP应用开发及系统平台开发等,服务范围涵盖基础的域名服务、主机服务;企业邮箱、云服务器、网络营销等应用服务,为不同类型的客户提供良好的互联网应用定制解决方案,助力客户在新的全球化互联网环境中保持优势。

  • 我们的优势

  • 更多 +关于书路景科技

    书路景科技一直秉承专业、诚信、服务、进取的价值观,追求极致性价比,向用户提供优质产品和优质服务,从而赢得了用户的信赖。自2009年以来我们业务范围包括深圳以及全国各地接受异地服务商的公司企业或者机构个人。书路景科技建站公司集网站设计制作、网络推广营销、小程序制作、APP开发等信息化服务于一体的新型互联网公司。

Copyright @2009-2018 Shulujing Technology Co., LTD. All Rights Reserved.