小程序开发之页面布局
Flex布局又称弹性布局,在小程序开发中比较适用。因此将Flex布局相关属性整理如下,搞清楚了这个布局,小程序开发的页面布局就不在话下了。 网页布局(layout)是CSS的一个重点应用。 布局的传统解决方案,基于 盒状模型 ,依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便,比如, 垂直居中 就不容易实现。 2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 Flex布局将成为未来布局的首选方案。本文介绍Flex布局的语法。 以下内容主要参考了下面两篇文章: A Complete Guide to Flexbox 和 A Visual Guide to CSS3 Flexbox Properties 。 一、Flex布局是什么? Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 .box{ display: flex; } 行内元素也可以使用Flex布局。 .box { display : inline-flex ; } Webkit内核的浏览器,必须加上-webkit前缀。 .box { display :