微信小程序开发04flex布局.pptx

第四章 flex布局教 学 大 纲 / 课 件 / 教 案 / 程 序 源 码

CONTENT目 录4.14.2flex布局的基本概念容器属性4.34.4项目属性猜画小歌4.5微付宝九宫格导航界面设计

flex布局的基本概念4.1chapter

一、基本概念 传统的布局方案主要基于CSS盒子模型，依赖于Display、Position、Float等属性。但是对于一些特殊布局，如水平垂直居中，使用传统布局方案会非常不方便。 flex（Flexible box，弹性盒子）布局是W3C在2009年提出的一种新的布局方案，可以方便地实现各种页面布局。小程序使用flex模型可以提高页面布局的效率。flex布局是一种灵活的布局模型，当页面需要适应不同屏幕尺寸及设备类型时，flex布局可以确保元素在恰当的位置。 flex模型的基本概念是容器和轴，容器包括外层的父容器和内层的子容器（又称为项目，flex item），轴包括主轴和交叉轴。在将父容器设置为flex模型后，它的所有子元素会自动成为子容器成员，即子容器如图所示。二、flex模型 子容器成员称为子元素，孙容器成员称为孙元素。对应的子元素中不论有什么内容，是块级还是行内，元素的设置只作用于子元素，同时需要在子元素上设置布局为flex模型，即display:flex。容器中设置的内容只对子元素起作用，而对孙元素不起作用。flex模型中容器的分布如图所示。二、flex模型

二、flex模型 容器默认存在两条轴，水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）称为main start，结束位置称为main end；交叉轴的开始位置称为cross start，结束位置称为cross end。 子容器（项目）默认沿主轴排列，单个项目占据的主轴空间称为main size，占据的交叉轴空间称为