Flex的特点及使用场景分析

Flex Layout是在CSS3中出现的一种新的布局模式，它是为展示出更加复杂的app或者网页而设计的，W3C官方称其为CSS弹性盒子布局。它与块样式布局相似，（缺点：）但缺少对于更加复杂的文字或者文档布局等需求的实现，反过来，它可以简单实现web网页和app中经常需要的空格均分以及内容对齐的需求。

特性如下：

1. 可以在垂直或者水平方向以任意一种对齐方式进行样式布局
2. 可以在单一轴线上布局也可以在多行内布局
3. 随可用空间的变化进行响应式布局（能够调整其子元素的宽度或者高度以使其能在不同分辨率的屏幕下能用最好的方式去填充可用空间）

适用场景：

1. Flexbox适用于包含有多个元素的盒子的样式渲染
2. Flexbox适用于在子元素的尺寸未知或者动态的情况下，对子元素的对齐方式、排列方式以及排序顺序进行控制展示

一般情况下，当我们对一部分内容进行布局的时候，会使用盒模型。常见的布局手段即是结合padding与margin设置元素的display、float和position。但是这三种方法在设置元素位置的时候，有时会相对死板并且使css语句过多。

比如：A是父容器，其中有B和C两个子元素，我们要设置B和C在同一行，并且B行内左对齐，C行内右对齐，以传统方式实现的话，我们需要在代码里边添加很多CSS相关代码，比如display、float等。

对于前边所述需求，可以用flex实现如下：

A:{flex-direction: row,justifyContent: 'space-between',},

可见，用很简单少量的代码就可实现样式需求。

但是，在使用FlexBox布局的过程中，需要注意的是（相关链接1，相关链接2）：

1. 其所使用的长宽都是没有单位的，即所有的尺寸设置都是设备独立像素——这句话可以这样理解：带有固定单位的尺寸在不同屏幕分辨率的设备上显示效果会不同，而“设备独立像素”则会使得无单位尺寸在不同分辨率屏幕上显示相同的样式效果。

2. React Native中的FlexBox 和Web CSSS上FlexBox工作方式是一样的，但有些地方还是有些出入的，如：

   • flexDirection: React Native中默认为flexDirection:'column'，在Web CSS中默认为flex-direction:'row'
   • alignItems: React Native中默认为alignItems:'stretch'，在Web CSS中默认align-items:'flex-start'
   • flex: 相比Web CSS的flex接受多参数，如:flex: 2 2 10%;，但在 React Native中flex只接受一个参数
   • 不支持属性：align-content，flex-basis，order，flex-basis，flex-flow，flex-grow，flex-shrink