微信小程序开发项目实战（微课版）课件 项目3 小程序常用组件.pptx

项目三小程序常用组件Flexelasticmodellayout任务一Flex弹性模型布局

Flex布局是继标准流布局、浮动布局、定位布局后的第四种布局方式。这种方式可以非常优雅的实现子元素居中或均匀分布，甚至可以随着窗口缩放自动适应。Flex布局在浏览器中存在一定的兼容性，在小程序中，是完全兼容Flex布局的，并且微信官方也是推荐使用Flex布局的。下面就来详细的讲下Flex布局。项目三小程序常用组件任务描述

Flex弹性模型布局弹性容器：包含着弹性项目的父元素。弹性项目(Flexitem)：弹性容器的每个子元素都称为弹性项目。轴(Axis)：每个弹性框布局包含两个轴。方向(Direction)：可以通过flex-direction来确定主轴和侧轴的方向。

Flex弹性模型布局传统的布局解决方案Flex容器属性Flex项目属性小程序Flex布局Flex-directionFlex-wrapjustity-contentalign-contentflex-flowalign-itemsorderflex-growflex-shrinkflex-basisflexalign-self

Flex布局相关属性主轴排列：默认情况下，容器在主轴的方向是从左到右。在主轴方向上，可以通过justify-content属性来设置他们的排列方式。属性说明flex-start项目靠近父盒子的左侧。默认采用的就是这种排列方式。flex-end项目靠近父盒子的右侧。center所有项目会挨在一起在父盒子的中间位置。space-around项目沿主轴均匀分布，位于首尾两端的子容器到父容器的距离是子容器间距的一半。space-between项目沿主轴均匀分布，位于首尾两端的子容器与父容器紧紧挨着。space-evenly项目在主轴上均匀分布，收尾两端的自容器到父容器的距离跟自容器间的间距是一样的。图主轴排列方式

Flex布局相关属性侧轴排列：默认情况下，侧轴的方向是从上到下。在侧轴方向上，可以通过align-items属性来设置他们的排列方式。图侧轴排列方式属性说明flex-start起始端对齐。默认就是这种对齐方式。flex-end末尾段对齐。center中间对齐。stretch如果项目没有设置高度。那么子容器沿交叉轴方向的尺寸拉伸至与父容器一致。

Flex布局相关属性主轴和侧轴方向：主轴默认的方向是从左到右，侧轴的方向默认是从上到下，当然也可以进行修改。可以通过flex-direction进行修改。图主轴和侧轴方向属性说明row默认属性。从左到右。row-reverse从右到左。column从上到下。column-reverse从下到上。

Flex布局相关属性换行：默认情况下，元素个数如果超过一定数量，那么在一行当中就排列不下。此时flex默认的处理方式是压缩元素，使其能在一行中排列下来。可以通过flex-wrap来改变排列的方式。图换行属性属性说明nowrap不换行。默认方式wrap换行wrap-reverse换行，但是第一行会在下面。

Flex布局相关属性多行排列：在排列中，如果有多行，那么这个属性是设置多行之间的排列方式。可以通过align-content属性来确定排列的方式。图多行排列方式属性说明flex-start从上往下排列。flex-end末尾段对齐center中点对齐space-between与交叉轴两端对齐，轴线之间的间隔平均分布space-around每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。stretch默认方式，如果没有给元素设置高度，那么会占满整个交叉轴。

Flex项目布局属性如果我们想对某一项子级元素单独设置属性，这就要用到flex的项目属性，设置在项目（子容器）上的6个属性。图flex项目布局属性属性说明order定义项目的排列顺序。数值越小，排列越靠前，默认为0。flex-grow定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。flex-shrink定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。负值对该属性无效。如果flex-shrink值为0，表示该项目不收缩。flex-basis定义了在分配多余空间之前，项目占据的主轴空间（mainsize）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。flex是flex-grow,flex-shrink和flex-basis的简写，默认值为01auto。后两个属性可选。align-self允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。