flex布局解析

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

一、基本概念

采用Flex布局的元素，称为Flex容器，容器的直接子元素称为Flex项目，容器默认有两个轴心线，用于项目的对齐与排列，水平主轴为main axis，垂直主轴为cross axis，主轴的开始位置为start，结束位置为end。

            

主轴和交叉轴的判定：如果flex-direction为row，则主轴是水平方向，如果是column，则主轴是垂直方向。

二、css属性说明

将任意元素的display属性设置为flex，可将其转换为Flex容器，设为Flex容器后，子元素的float、clear和vertical-align属性将失效。

三、Flex容器(flex-container)属性

主轴方向：水平排列（默认）| 水平反向排列 | 垂直排列 | 垂直反向排列；

flex-direction：row | row-reverse | column | column-reverse;

换行：不换行（默认）| 换行 | 反向换行（第一行在最后面）;

flex-wrap: nowrap | wrap | wrap-reverse;

flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap；

flex-flow：<flex-direction> || <flex-wrap>;

主轴（水平）对齐方式：起点对齐（默认）| 终点对齐 | 居中对齐 | 两端对齐 | 分散对齐；

justify-content：flex-start | flex-end | center | space-between | space-around;

交叉轴（垂直）对齐方式：起点对齐（默认）| 终点对齐 | 居中对齐 | 第一行文字的基线对齐 | 拉伸对齐；

align-items：flex-start | flex-end | center | baseline | stretch;

多根轴线对齐方式： 起点对齐（默认）| 终点对齐 | 居中对齐 | 两端对齐 | 分散对齐 | 拉伸对齐；

align-content：flex-start | flex-end | center | space-between| space-around;

四、Flex项目(flex-items)属性

顺序：数值越小，排列越靠前，默认为0

order: <number>;

放大比例：默认为0，即如果存在剩余空间，也不放大，值为1时放大，值为2时双倍大。

flex-grow: <number>;

缩小比例：默认为1，即如果空间不足，该项目将缩小，值为0不缩小。

flex-shrink: <number>;

项目自身大小：默认auto，为原来的大小，可设置固定值50px/50%。

flex-basis: <length> | auto;

flex-grow, flex-shrink,flex-basis的简写，默认值为0 1 auto;

该属性有两个快捷值：auto（1 1 auto）和none（0 0 auto）；

项目自身对齐：继承父元素（默认）| 起点对齐 | 终点对齐 | 居中对齐 | 基线对齐 | 拉伸对齐；

align-self：auto | flex-start | flex-end | center | baseline | stretch;

五、兼容性

flex发展过程中，共有三个版本，旧版本display: box | inline-box,混合版本display: flexbox | inline-flexbox,新版本display: flex | inline-flex.

.box {
    display: -webkit-box;/*老版本语法：Safari, ios,Android browser,old WebKit browsers.*/
    display: -moz-box;/*老版本语法：Firefox(buggy)*/
    display: -ms-flexbox;/*混合版本语法：IE10*/
    display: -webkit-flex; /*新版本语法：Chrome 21+*/
    display: flex; /*新版本语法：Opera 12.1, Firefox 22*/
}

旧版相对于新版的主要区别：flex项目必须是block，没有换行设置，没有反向设置，主轴没有space-around,顺序值从1开始。

下面使用使用 postcss 插件 autoprefixer 来自动处理新旧版本的兼容：

autoprefixer({
  browsers: [
	'ie >= 8',
	'ie_mob >= 10',
	'ff >= 26',
	'chrome >= 30',
	'safari >= 6',
	'opera >= 23',
	'ios >= 5',
	'android >= 2.3',
	'bb >= 10'
  ]
})

参考

上述文档参考自：

        Flex布局应用

        Flex布局教程·语法篇

        css旧版flex及兼容