【微信小程序】第3章 小程序框架-3.3 flex布局

一、基本概念1. flex布局是什么Flex是‘Flexible Box’缩写又称弹性盒子布局是微信小程序以及网页开发中最常用的页面布局方式相较于传统使用的‘display属性position属性float属性’实现的布局方式flex布局能够更灵活、简单地实现页面元素的排版、对齐、分布和自适应。2. flex容器、flex项目、主轴和交叉轴flex容器设置了display:flex样式的父组件。flex项目容器内部包含的所有子组件称为项目默认沿主轴方向排列。主轴flex布局默认是水平布局主轴默认是水平方向从左向右。可通过flex-direction属性修改主轴方向及排列方式交叉轴与主轴垂直的轴默认是垂直方向自上到下。二、flex属性在小程序中与flex布局相关的样式属性根据其标签类型可分为容器属性和项目属性。1. 容器属性用于规定容器布局方式从而控制容器内部项目的排列和对齐方式。注意要想使下列容器属性生效必须先开启flex布局①dispaly:flex属性作用默认值其他有效值flex-direction项目在主轴上的排列方向设置主轴方向row水平方向从左到右row-reverse水平方向从右到左column垂直方向从上到下column-reverse垂直方向从下到上justify-content项目在主轴上的对齐方式flex-start项目对齐主轴起点项目间无间隔center项目在主轴上居中排列项目间无间隔主轴上第一个项目离主轴起点和最后一个项目离主轴终点的距离相等flex-end项目对齐主轴终点项目间无间隔space-between项目等距离间隔第一个项目距离主轴起点和最后一个项目距离主轴终点的距离为0space-around项目等距离间隔第一个项目距离主轴起点和最后一个项目距离主轴终点的距离为项目间间隔的一半space-evenly项目与项目第一个项目与主轴起点以及最后一个项目与主轴终点间隔均相等align-items项目在交叉轴上的对齐方式stretch未设置项目尺寸时将项目拉伸至填满交叉轴flex-start项目顶部对齐交叉轴起点center项目在交叉轴上居中对齐)flex-end项目底部对齐交叉轴终点baseline项目与第一行文字的基线对齐flex-wrap项目是否换行nonwrap不换行超过宽度项目会被压缩wrap容器单行容不下项目时允许换行wrap-reverse换行为wrap的反方向align-content多行项目在交叉轴上的对齐方式stretchflex-start | center | flex-end | space-between | space-around | space-evenly2. 项目属性用来设置容器内部项目的尺寸、位置及对齐方式。注意要想使下列项目属性生效必须先开启flex布局①dispaly:flex属性作用默认值其他有效值order项目在主轴上的排列顺序0整数数值越小排列越靠前flex-shrink设置项目收缩因子收缩在主轴上溢出的项目1非负数项目最终长度收缩因子大于1 项目原长度x(1-溢出长度*收缩因子-压缩总权重)压缩总权重项目长度*收缩因子之和溢出长度收缩因子小于1实际溢出长度*收缩因子之和flex-grow设置项目扩张因子主轴上有剩余空间扩张项目空间0项目最终长度收缩因子之和大于1 项目原长度扩张单位x扩展因子扩展单位收缩因子之和大于1 剩余空间 / (扩张因子之和)扩展单位收缩因子之和小于1 实际剩余空间align-self设置某个项目在行中交叉轴上的对齐方式auto默认继承align-items值flex-start | center | flex-endbaseline | stretch