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;
}