微信小程序开发10-开发流程

1.Flex布局

Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

2.设置容器,用于统一管理容器内项目布局,也就是管理项目的排列方式和对齐方式。

flex-direction 属性

通过设置坐标轴,来设置项目排列方向。

.container
{ flex-direction: row(默认值) | row-reverse | column | column-reverse }

row(默认值):主轴横向,方向为从左指向右。项目沿主轴排列,从左到右排列。

row-reverse:row的反方向。主轴横向,方向为从右指向左。项目沿主轴排列,从右到左排列。

column:主轴纵向,方向从上指向下。项目沿主轴排列,从上到下排

column-reverse:column的反方向。主轴纵向,方向从下指向上。项目沿主轴排列,从下到上排列。

flex-wrap属性

设置是否允许项目多行排列,以及多行排列时换行的方向。

nowrap(默认值):不换行。如果单行内容过多,则溢出容器。
wrap:容器单行容不下所有项目时,换行排列
wrap-reverse:容器单行容不下所有项目时,换行排列。换行方向为wrap时的反方向。

 
posted @ 2018-08-12 22:44  RichardWG  阅读(208)  评论(0编辑  收藏  举报