广告位招租 qq245909083

微信小程序布局display flex布局介绍

分享时间:2020-04-10 66 热度℃
标题是微信小程序布局display flex布局介绍,其实是对css3的display flex的通用解释,并不限于微信小程序布局,微信小程序里不是写div之类,应该换为view之类的标记,当然原理一样,把这篇文章中讲到的flex布局只是搬过去就可以用了。

display flex是什么?
微信小程序最近火的不要不要的,下载开发工具测试了一下,小程序对css支持很好, 布局使用display flex布局火力强大,不太了解或者对flex布局比较生疏的童靴分享一下display flex部分知识

display flex是将对象作为弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)

在web网页中必须要考虑兼容性,因为浏览器不同,浏览器的支持和实现方式也不同,导致兼容起来略显麻烦

不过,我们这里是开发微信小程序的话,并不需要考虑其他浏览器。

display flex布局使用方法
设定一个容器,其中有多个子容器,比如,这是一个简单的例子

<div style="width:400px; height: 120px; background: #ddd;  display: flex;flex-flow: row;">
    <div style="border: #fff solid 1px;  width: 100px;>jquery特效</div>
    <div style="border: #fff solid 1px;  width: 100px;><a href="http://www.51xuediannao.com/xiaochengxu/">微信小程序开发</a></div>
    <div style="border: #fff solid 1px; width:100px;><a href="http://www.51xuediannao.com/">web前端开发</a></div>
</div>
display flex容器的属性
flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

flex-direction属性
flex-direction属性决定主轴的方向(即项目的排列方向)。
.box {  

  flex-direction: row | row-reverse | column | column-reverse;  

}  

row(默认值):主轴为水平方向,起点在左端。

row-reverse:主轴为水平方向,起点在右端。

column:主轴为垂直方向,起点在上沿。

column-reverse:主轴为垂直方向,起点在下沿。
返回顶部