微信小程序flex布局

Flex布局旦粗：意为“d性布局”，为盒模型提供巨大的灵活性

使用说明：

1. 任何容器都可以使用flex布局

  display: flex

2.行内元素可以使用flex布局

  display: inline-flex

外层flex容器的属性：

1.flex-direction属性

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

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

2.flex-wrap属性

 flex-wrap: nowrap | wrap | wrap-reverse

nowrap (默认值) ：不换行。

wrap：换行，第一行在上方。

wrap-reverse：换行，第一行在下方。

3. flex-flow属性：是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

flex-flow: <flex-direction>|| <flex-wrap>

4. justify-content属性：定义item在主轴上的对齐方式

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

flex-start（默认值）：左对派帆齐

flex-end：右对齐

center： 居中

space-between：两端对模羡镇齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

5. align-items属性：定义项目在交叉轴上如何对齐

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

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

6. align-content属性：定义多跟轴线的对齐方式，如果只有一根轴线则不起作用

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

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。

项目item的属性

1. order属性：定义项目的排列顺序，数值越小越靠前，默认值为0，负数在0前面

order: <integer>

2. flex-grow属性：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

 flex-grow: <number>/* default 0 */

3. flex-shrink属性：定义项目缩小比例，默认是1，即如果空间不足，该item将缩小

 flex-shrink: <number>/* default 1 */

4. flex-basis属性：在分配多余空间之前，item占据的主轴空间（main size），默认值auto，即item本身大小

flex-basis: <length>| auto/* default auto */

5. flex属性：是flex-grow，flex-shrink，flex-basis的简写，默认值为0 1 auto，后面两个属性可选

 flex: none | [ <'flex-grow'><'flex-shrink'>? || <'flex-basis'>]

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

6. align-self属性：允许单个item与其他item有不一样的对其方式，可覆盖align-items属性

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

基本命令

前进 FD

后退 BK

左转 LT

右转 RT

设置笔粗 SWET

这五个命令是要带参数的，比如说FD 100 就代表前进100步，注意要有空格

提笔 PU

落笔 PD

笔擦 PE

回家 HOME

清屏 CS

隐龟 HT

显龟 ST

这几个是不要带参数唤缓的

还卖则有重复 repeat n [ .......],表示把中和配模括号里重复n遍

还有很多命令，可以去翻手册。

温馨提示：标点都要用英文状态下的，命令之间要有空格，如果你输错的话，他会用绿色显示该错误命令的。

---