微信小程序开发之flex布局笔记

微信小程序开发推荐使用flex布局。本人在平时的小程序开发中，都是优先使用flex布局。对于一个搞不懂css的后端程序员来说，使用flex布局真的是事半功倍，怎么用怎么爽。

flex布局教程：http://www.runoob.com/w3cnote/flex-grammar.html

参考资料：http://www.runoob.com/css3/css3-flexbox.html

Flexbox可以在不同屏幕尺寸上提供一致的布局结构。一般来说，使用flexDirection、alignItems和 justifyContent三个样式属性就已经能满足大多数布局需求。

一、容器上的标签：

display: flex

flex-direction: row |row-reverse |column |column-reverse

顺序指定了弹性子元素在父容器中的位置。

justify-content: flex-start | flex-end | center | space-between | space-around

弹性项沿着弹性容器的主轴线（main axis）对齐方式。

align-items: flex-start | flex-end | center | baseline | stretch

设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

flex-wrap: nowrap - 默认| wrap | wrap-reverse

用于指定弹性盒子的子元素换行方式。（默认情况下（flex-direction: row），项目都排在一轴线上。flex-wrap属性定义，如果一条轴线排不下，如何换行）

align-content: flex-start | flex-end | center | space-between | space-around | stretch-默认

用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。（align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用.）

二、弹性子元素上的标签

order:

排序：用整数值来定义排列顺序，数值小的排在前面。可以为负值。

margin:

对齐：

设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。

margin-right: auto; 它将剩余的空间放置在元素的右侧。

设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中。（完美解决我们平时碰到的居中问题）

align-self:  auto | flex-start | flex-end | center | baseline | stretch

用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。

flex: auto | initial | none | inherit |  [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

用于指定弹性子元素如何分配空间。

就这些笔记。

---

小程序研究加入