Flex

Flex布局是前端比较灵活的一种布局方式，能否满足各种布局要求和需求，在React Native 小程序 Flutter中都有广泛的应用。

首先从Flex对象上，分为两类对象：
1.flex container，flex容器类，里面的元素会按照flex模式来布局。 元素声明css属性display:flex或者inline-flex，即为flex container。
2.flex item , 处于flex container下的直接子元素，即为flex item类。

---

flex container上的容器相关flex核心属性有以下：

• flex-direction 用来指定main axis和cross axis方向。
• justify-content 用来指定flex item在main axis的对齐方式
• align-items 指定flex item在cross axis的对齐方式
• flex-wrap 指定flex container是单行还是多行
• align-content 指定多行flex item在cross axis的对齐方式

flex item上的容器相关flex核心属性有以下：

• align-self 用于覆盖flex container设置的align-items，单独决定该flex item 在cross axis的对齐方式。
• flex-grow 决定flex item在main axis上如何扩展，只有flex-container还有剩余的size时，这个属性才生效。如果所有items这个值的总和为sum，sum>=1，则grow属性作为权重比参与扩展，扩展大小=itemSize * grow / sum，如果sum<1，则扩展大小=itemSize * grow。默认是0，就是默认不参与扩展。
• flex-shrink 决定flex item在main axis上如何收缩，只有超出flex-container时，这个属性才会生效，计算比较麻烦，不建议使用。默认是1，就是默认会参与收缩，而且是按用户size大小比例参与收缩至container限制大小。如果均为0，则表示不参与收缩。
• flex-basis 用来设置flex item在main axis方向的size，默认auto/content，是由内容本身的size决定。flex item最终的size，由不同优先级属性来指定，最高一级 max-XX min-X > flex-basis > width/height > 内容本身的size

组合属性：

• flex container：
• flex-flow 是 flex-direction || flex-wrap 简写
• flex item:
• flex 是 flex-grow flex-shrink? || flex-basis 简写