Flex弹性布局——属性总结（一）

前言

最近小程序的势头渐渐变猛，一方面有微信逐渐完善的生态社区，另一方面又有百度、阿里甚至头条都开始构建自己的小程序生态。在移动端的兼容需求越来越多，那么提高开发效率自然也就成了前端的需求，Flex布局是个好东西。

一、Flex与传统盒子的对比

传统布局的核心是盒子模型，依赖 display 属性 + position 属性 + float 属性。可以看出来传统布局非常容易实现像 word 左对齐，右对齐这样的功能，可以说，传统布局更适合于文字排版。

但是，对于垂直居中这样一些布局，以及响应式开发，虽说可以实现，但是却不够效率。使用Flex布局则有这些优势：

• 免去了很多计算。在布局中Flex大量运用了比例的关系去映射元素的位置；
• flex 对响应式布局的支持更好，很多时候屏幕尺寸的改变幅度大，用传统布局去更改需要计算大量坐标像素；
• flex 支持行内元素。

二、Flex概念介绍

1、弹性盒子模型：

要灵活运用flex提供的便利，首先需要了解的是它盒子中贯彻的概念：

• 主轴（main axis）
• 交叉轴（cross axis）

如图：