记录微信小程序之flex布局

Flex布局

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

flex布局一共有6个属性：

1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content

1）flex-direction：就是定义容器中所有组件的排列方向，排列方向的话有4种：row， row-reverse， column， column-reverse，但常用的基本就是row和column这两种了，其它两种逆向排序目前没发现能用在什么样的布局上。默认值为row。

2）flex-wrap：定义了容器内组件在一条轴线排不下，如何换行。换行方式有3种 nowrap（不换行）， wrap（换行）， wrap-reverse（逆向换行），默认值为nowrap，当然我们常用的也是前两种，第三种逆向换行，我也是没想到这种诡异的换行方式能用在哪种布局上。

3）flex-flow：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap，笔者个人还是喜欢将两者分开定义。

4）justify-content: 定义了项目在主轴上的对齐方式，这也是flex比原先的h5布局要强的地方，原先的h5布局要实现各种对齐还是比较麻烦的。
flex-start（默认值）：左对齐

flex-end：右对齐

center： 居中

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

space-around：每个项目两侧的间隔相等，所以，项目之间的间隔比项目与边框的间隔大一倍。个人觉得这种布局使用场景也比较少。

5）align-items：定义项目在交叉轴上如何对齐。

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

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

center：交叉轴的中点对齐。

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

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

6）align-content：定义了多轴线的对齐方式，总的来说用的比较少，这里就不介绍了。

作者：monkey01
链接：https://www.jianshu.com/p/e4f371d6dc5e
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

转自：monkey01
链接：https://www.jianshu.com/p/e4f371d6dc5e

一篇文章弄懂flex布局：
https://www.cnblogs.com/echolun/p/11299460.html