微信小程序学习笔记-3.2.1 flex布局基础 和常用操作

2018/5/30 （陆续补充）

flex 布局用的是真的多。在这里搜集一下.

这位基本介绍干净了

https://www.cnblogs.com/sun8134/p/6395947.html

但是这位没有介绍压缩的问题，因为 flex 布局实际上会对内部元素进行压缩。

这关系到 flex-wrap 这个属性

这位介绍了这个问题 https://blog.csdn.net/u013673799/article/details/70157294

align-items 和 align-content 的区别

https://blog.csdn.net/sinat_27088253/article/details/51532992

flex 布局的注意事项

https://blog.csdn.net/shuidinaozhongyan/article/details/71636282

补充一下

前提： flex 为最外侧布局

color，backgroundcolor 可以被继承

由于 flex 是作用于容器内的组件，flex 不会被继承

如果想要多重 flex 嵌套，需要在每一个节点的容器内重新书写

flex-direction 默认值为 row

比较常用的操作

1）纵排内部控件 侧轴居中

  display: flex;
  flex-direction: column;
  align-items: center;

主轴居中只需要把 align-items 改成 justify-content

2) flex:1

让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容