弹性盒子布局是现在十分流行的布局方式，能让我们更好地操作子元素的布局。但是要注意，元素设置为flex布局以后，子元素的float、clear、vertical-align属性会失效
flex的布局很多人都用过，但是对于box可能大多数人不了解，其实这两个都是弹性盒子的布局，各阶段的草案命名而已，用法上也是大同小异，可以根据个人习惯任选一种直接复制进flex文件，希望能够方便各位小伙伴
flex布局常用属性
.g-flex {
display:
flex;
}
.g-flex-item {
flex:
1;
}
//垂直居中
.g-vcenter {
@extend .g-flex;
align-items:
center;
}
//下对齐
.g-bottom {
@extend .g-flex;
align-items:
flex-end;
}
//水平居中
.g-hcenter {
@extend .g-flex;
justify-content:
center;
}
//垂直并且水平居中
.g-center {
@extend .g-flex;
justify-content:
center;
align-items:
center;
}
//模块两端对齐
.g-between {
@extend .g-flex;
justify-content:
space-between;
}
//模块两端对齐并且垂直居中
.g-between-center {
@extend .g-between;
align-items:
center;
}
//模块两端对齐并且上对齐
.g-between-top {
@extend .g-between;
align-items:
start;
}
//模块两端对齐并且下对齐
.g-between-bottom {
@extend .g-between;
align-items:
flex-end;
}
//项目位于各行之前、之间、之后都留有空白的容器内，环绕分布
.g-around {
@extend .g-flex;
justify-content:
space-around;
}
//弹性布局 纵向
.g-flex-column {
flex-direction:
column;
}
//弹性布局 横向
.g-flex-row {
flex-direction:
row;
}
//换行
.g-flex-wrap{
flex-wrap:
wrap;
}
box布局常用属性
.ub
{
display: -webkit-box
!important;
display: box
!important;
position:
relative;
}
.ub-rev
{
-webkit-box-direction:
reverse;
box-direction:
reverse;
}
.ub-ac
{
-webkit-box-align:
center;
box-align:
center;
}
.ub-ae
{
-webkit-box-align:
end;
box-align:
end;
}
.ub-pc
{
-webkit-box-pack:
center;
box-pack:
center;
}
.ub-pe
{
-webkit-box-pack:
end;
box-pack:
end;
}
.ub-pj
{
-webkit-box-pack:
justify;
box-pack:
justify;
}
.ub-ver
{
-webkit-box-orient:
vertical;
box-orient:
vertical;
}
.ub-f1
{
position:
relative;
-webkit-box-flex:
1;
box-flex:
1;
}
.ub-f2
{
position:
relative;
-webkit-box-flex:
2;
box-flex:
2;
}