小程序编程基础-wxss弹性盒模型布局.pptVIP

微信小程序开发

flex弹性盒模型布局演讲：Jacky目录1WXSS常用样式Flex弹性布局简介2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。Flex弹性布局基本概念容器采用Flex布局的元素，称为Flex容器（flexcontainer),简称”容器”。2.项目容器中所有子元素自动成为容器成员，称为Flex项目（flexitem），简称”项目”Flex弹性布局基本概念3.主轴与交叉轴Flex弹性布局容器属性flex-direction采该属性决定项目主轴的方向，即项目的排列方向，该属性可能的四个值1）row:表示主轴在水平方向，起点在左边2）row-revers:表示主轴在水平方向，起点在右边3）column:表示主轴在垂直方向，起点在上边4）column-revers:表示主轴在垂直方向，起点在下边Flex弹性布局容器属性2.flex-wrap项目默认排在一条线上(轴线)，flex-wrap属性定义，如果一条轴线排不下，可能选择换行，该属性可能的三个值1）wrap:表示换行，第一行在上方2）nowrap:表示不换行3）wrap-reverse:表示换行，第一行在下方Flex弹性布局