flex理解
阮一峰flex教程
flex基本概念
flex: flex-grow、flex-shrink、flex-basis的简写和全写
flex和flex:1的含义
全局定义
.flex {
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-column {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-orient: vertical;
-moz-box-direction: normal;
flex-direction: column;
-webkit-flex-direction: column;
-moz-flex-direction: column;
}
.flex-wrap {
-webkit-flex-wrap: wrap;
-webkit-box-lines: multiple;
-moz-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-x-center {
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit--moz-box-pack: center;
box-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
}
.flex-x-start {
-webkit-box-pack: start;
-moz-box-pack: start;
-webkit--moz-box-pack: start;
box-pack: start;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
justify-content: flex-start;
}
.flex-x-between {
-webkit-box-pack: justify;
-moz-box-pack: justify;
-webkit--moz-box-pack: justify;
box-pack: justify;
-moz-justify-content: space-between;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.flex-x-end {
-webkit-box-pack: end;
-moz-box-pack: end;
-webkit--moz-box-pack: end;
box-pack: end;
-webkit-justify-content: flex-end;
-moz-justify-content: flex-end;
justify-content: flex-end;
}
.flex-y-center {
align-items: center;
-webkit-align-items: center;
-moz-align-items: center;
box-align: center;
-moz-box-align: center;
-webkit-box-align: center;
}
.flex-y-end {
-webkit-box-align: end;
-moz-align-items: flex-end;
-webkit-align-items: flex-end;
-align-items: flex-end;
}
.flex-1 {
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
flex: 1;
-webkit-flex: 1;
-moz-flex-grow: 1;
}
用法示例
<!--水平展示, 上下居中-->
<div class="flex flex-x-between flex-y-center">
<div>点击展开</div>
<div class="flex-1 icon-arr-right"></div>
</div>
<!--垂直展示, 左右居中-->
<div class="flex flex-column flex-y-center">
<div>case1</div>
<div>case1</div>
</div>