微信小程序布局初体验

微信小程序开发新手，以前没有前端基础，权当笔记，不敢误人子弟。

1.display: flex; 用于设定一个容器

2.flex-direction: row|column;      row是横向排列（默认），column是纵向排列，其余反向排列不再列出

3.flex-wrap: nowrap | wrap;    控制一条轴线排不下对时候如何换行，nowrap表示不换行，wrap表示换行显示

4.justify-content（水平方向布局）     控制子盒子的水平位置。

   4.1 flex-start（默认值）：左边

   4.2 flex-end：右边

   4.3 center：中间

   4.4 space-between：两端对其，头尾距离为0，项目之间均分剩余距离

   4.5 space-around：每个子盒子通过padding值均分距离，头尾为1，中间为2

5.align-items   控制子盒子垂直位置（针对单行）

   5.1 flex-start（默认值）：左边

   5.2 flex-end：右边

   5.3 center：中间

6.align-content   控制子盒子垂直位置（多根轴线，单行无效果）

• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
• stretch（默认值）：轴线占满整个交叉轴。