Flex less实现移动端flex兼容

flex作为新的布局样式,在移动端的兼容性还不够好.所以根据网上的经验,合并了一个less的函数,方便引入使用.关于flex了解更多可访问Flex - MDN.
你可以到github直接fork一个less文件.flex-less - github

你也可以直接复制下方代码

/**
 * flex布局
 * @param  {string} @flex-direction:column  主轴的方向
 * row：主轴为水平方向，起点在左端。
 * row-reverse：主轴为水平方向，起点在右端。
 * column：主轴为垂直方向，起点在上沿。
 * column-reverse：主轴为垂直方向，起点在下沿。
 * @param  {string} @justify-content:center 在主轴上的对齐方式
 * flex-start：左对齐
 * flex-end：右对齐
 * center： 居中
 * space-between：两端对齐，项目之间的间隔都相等
 * @param  {string} @align-items:center     在交叉轴上如何对齐。
 * flex-start：交叉轴的起点对齐。
 * flex-end：交叉轴的终点对齐。
 * center：交叉轴的中点对齐。
 * baseline: 项目的第一行文字的基线对齐。
 * stretch：如果项目未设置高度或设为auto，将占满整个容器的高度。
 * 
 */
.flex(@flex-direction:column,@justify-content:center,@align-items:center){
    display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
    .flex-direction(@flex-direction);
    .flex-justify-content(@justify-content);
    .flex-align-items(@align-items);
}
//主轴的方向
.flex-direction(@flex-direction) when (@flex-direction=row){
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
}
.flex-direction(@flex-direction) when (@flex-direction=row-reverse){
    -webkit-box-pack: end;
    -webkit-box-direction: reverse;
    -webkit-box-orient: horizontal;
    -moz-flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
.flex-direction(@flex-direction) when (@flex-direction=column){
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
.flex-direction(@flex-direction) when (@flex-direction=column-reverse){
    -webkit-box-pack: end;
    -webkit-box-direction: reverse;
    -webkit-box-orient: vertical;
    -moz-flex-direction: column-reverse;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
}
//主轴对齐方式
.flex-justify-content(@justify-content) when (@justify-content=flex-start){
    -webkit-box-pack: start;
    -moz-justify-content: @justify-content;
    -webkit-justify-content: @justify-content;
    justify-content: @justify-content;
}
.flex-justify-content(@justify-content) when (@justify-content=flex-end){
    -webkit-box-pack: end;
    -moz-justify-content: @justify-content;
    -webkit-justify-content: @justify-content;
    justify-content: @justify-content;
}
.flex-justify-content(@justify-content) when (@justify-content=center){
    -webkit-box-pack: center;
    -moz-justify-content: @justify-content;
    -webkit-justify-content: @justify-content;
    justify-content: @justify-content;
}
.flex-justify-content(@justify-content) when (@justify-content=space-between){
    -webkit-box-pack: justify;
    -moz-justify-content: @justify-content;
    -webkit-justify-content: @justify-content;
    justify-content: @justify-content;
}
//交叉轴对齐方式
.flex-align-items(@align-items) when (@align-items=flex-start){
    -webkit-box-align: start;
    -moz-align-items: @align-items;
    -webkit-align-items: @align-items;
    align-items: @align-items;
}
.flex-align-items(@align-items) when (@align-items=flex-end){
    -webkit-box-align: end;
    -moz-align-items: @align-items;
    -webkit-align-items: @align-items;
    align-items: @align-items;
}
.flex-align-items(@align-items) when (@align-items=center){
    -webkit-box-align: center;
    -moz-align-items: @align-items;
    -webkit-align-items: @align-items;
    align-items: @align-items;
}
.flex-align-items(@align-items) when (@align-items=baseline){
    -webkit-box-align: baseline;
    -moz-align-items: @align-items;
    -webkit-align-items: @align-items;
    align-items: @align-items;
}
.flex-align-items(@align-items) when (@align-items=stretch){
    -webkit-box-align: stretch;
    -moz-align-items: @align-items;
    -webkit-align-items: @align-items;
    align-items: @align-items;
}

/**
 * flex子元素
 * @param  {boolen} @display 是否允许伸缩
 */
.flex-child(@display) when (@display=true){
    -webkit-box-flex: 1.0;
    -moz-flex-grow: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;
}