微信小程序开发
北方工业大学
案例Flex弹性盒模型布局
案例描述
设计一个小程序，利用flex弹性盒模型布局实现
三栏布局、左右混合布局和上下混合布局。
实现效果
案例实现
实现过程通过录屏来实现
知识要点
本案例主要涉及Flex布局和利用line-height属性设置
盒模型中文本垂直居中对齐的方法。
?Flex是FlexibleBox的缩写，意为”弹性布局”，用
来对盒状模型进行布局。如图所示:
Flex弹性盒模型布局
Flex容器布局
属性含义合法值
flex-设置主轴方向（即项目row,row-reverse,column,
direction排列方向）column-reverse
如果一条轴线排不下，nowrap,wrap,wrap-
flex-wrap
如何换行reverse
flex-start,flex-end,center,
justify-项目沿主轴方向的对齐
space-between,space-
content方式
around
项目在交叉轴上的对齐flex-start,flex-end,center,
align-items
方式baseline,stretch
flex-start,flex-end,center,
align-项目在交叉轴上有多根
space-between,space-
content轴线时的对齐方式
around,stretch
Flex项目布局
属性说明
order项目的排列顺序。数值越小，排列越靠前，默认为0。
各项目宽度之和小于容器宽度时，各项目分配容器剩余
flex-grow
宽度的放大比例，默认为0，即不放大。
flex-各项目宽度之和大于容器宽度时，各项目缩小自己宽度
shrink的比例，默认为1，即该项目将缩小。
元素宽度的属性，和width功能相同，但比width的优先
flex-basis
级高。
是flex-grow,flex-shrink和flex-basis的简写，默认值为01
flex
auto。后两个属性可选。
允许单个项目有与其他项目不一样的对齐方式，可覆盖
align-selfalign-items属性。默认值为auto，表示继承父元素的align-
items属性，如果没有父元素，则等同于stretch。
利用line-height设置文本垂直居中对齐
line-height可以理解为每行文字所占的高度。比如说，
有一行高度为20