[CSS]关于Flex布局

现在跨平台的js+native的框架在手机应用中越来越流行，例如facebook的reactnative框架和阿里巴巴的weex框架。在应用这些框架的时候一个很重要的问题就是布局问题，手机的屏幕尺寸不定，iOS和android原生应用的布局机制又不一致，鉴于此reactnative也启用css3中加入的新特性flex来解决跨平台手机应用的布局问题，而没有采用传统的网页布局方式。reactnative和网页中启用的flex布局所应用的知识点完全一致。所以下面简单介绍一下flex布局相关问题，reactnative相关知识就不赘述。

一、基本概念

任何容器都可以指定为flex布局，采用Flex布局的元素称为Flex容器（flex container），其所有子项目自动成为容器成员，记Flex 项目（flex item），简称“项目”。

基本概念示意图.png

二、容器属性

属性名	值	备注
flex-direction	row（默认值）	主轴为水平方向，起点在左端。
	row-reverse	主轴为水平方向，起点在右端。
	column	主轴为垂直方向，起点在上沿。
	column-reverse	主轴为垂直方向，起点在下沿。
flex-wrap	nowrap（默认）	不换行
	wrap	换行，第一行在上方。
	wrap-reverse	换行，第一行在下方。
flex-flow	或者	flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
justify-content	flex-start（默认值）	左对齐
	flex-end	右对齐
	center	居中
	space-between	两端对齐，项目之间的间隔都相等。
	space-around	每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items	flex-start	交叉轴的起点对齐。
	flex-end	交叉轴的终点对齐。
	center	交叉轴的中点对齐。
	baseline	项目的第一行文字的基线对齐。
	stretch（默认值）	如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content	flex-start	交叉轴的终点对齐。
	flex-end	与交叉轴的终点对齐。
	center	与交叉轴的中点对齐。
	space-between	与交叉轴两端对齐，轴线之间的间隔平均分布。
	space-around	每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
	stretch（默认值）	轴线占满整个交叉轴。

容器属性有六个，如上表所示。其实准确的说应该是5个，flex-flow 属性是flex-direction属性和flex-wrap属性的简写形式。其实际作用可以结合下面的示例代码，用浏览器的调试器更换5个属性不同的取值，来看显示效果，已达到更好的感性认识，加深对各个属性值的作用。




    
    Title

调试示意图.png

值得注意的是由图表我们可以发现align-content 和 justify-content 的属性值取值是相同的，其含义也是类似的。justify-content 作用于每一行内的每一项对齐方式，也就是其水平方向的对齐方式，而align-content 是每一行在垂直方向上的对齐方式（注意：这里说每一行的前提是flex-direction的值设置的方向是水平方向，如果flex-direction设置是垂直方向，那么这里的“每一行”就必须说成是“每一列”了，justify-content 和 align-content 相对应的方向都要相应做更改。）

还有一点要注意的如果项目只有一根轴线，align-content属性不起作用，按照上面的程序flex-direction设置是水平方向，也就是说必须要是多行的情况下align-content属性才起作用，也就是item的数量和尺寸足够换行，并且flex-wrap 的属性不能设置成nowrap（默认值）。

三、项目的属性

属性名	值	备注
order		定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow		定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink		定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis	或 auto	定义了在分配多余空间之前，项目占据的主轴空间（main size）（默认值为auto）
flex	none 或者 [ <'flex-grow'> <'flex-shrink'>? 或者 <'flex-basis'> ]	flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
align-self	auto（默认值）	align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。除了auto，其他都与align-items属性完全一致
	flex-start	交叉轴的起点对齐。
	flex-end	交叉轴的终点对齐。
	center	交叉轴的中点对齐。
	baseline	项目的第一行文字的基线对齐。
	stretch（默认值）	如果项目未设置高度或设为auto，将占满整个容器的高度。