CSS3 flex布局和box布局详解

弹性盒子布局是现在十分流行的布局方式，能让我们更好地操作子元素的布局。但是要注意，元素设置为flex布局以后，子元素的float、clear、vertical-align属性会失效

flex的布局很多人都用过，但是对于box可能大多数人不了解，其实这两个都是弹性盒子的布局，各阶段的草案命名而已，用法上也是大同小异，可以根据个人习惯任选一种直接复制进flex文件，希望能够方便各位小伙伴

flex布局常用属性.

.g-flex {
  display: flex;
}

.g-flex-item {
  flex: 1;
}

/*垂直居中*/
.g-vcenter {
  display: flex;
  align-items: center;
}

/*下对齐*/
.g-bottom {
  display: flex;
  align-items: flex-end;
}

/*上对齐*/
.g-top {
  display: flex;
  align-items: flex-start;
}

/*水平居中*/
.g-hcenter {
  display: flex;
  justify-content: center;
}

/*垂直并且水平居中*/
.g-center {
  display: flex;
  justify-content: center;
  align-items: center;
}


/*模块居于末尾*/
.g-end {
  display: flex;
  justify-content: flex-end;
}

/*模块两端对齐*/
.g-between {
  display: flex;
  justify-content: space-between;
}

/*模块两端对齐并且垂直居中*/
.g-between-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/*模块两端对齐并且上对齐*/
.g-between-top {
  display: flex;
  justify-content: space-between;
  align-items: start;
}

/*模块两端对齐并且下对齐*/
.g-between-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

/*弹性布局 纵向*/
.g-flex-column {
  flex-direction: column;
}

/*弹性布局 横向*/
.g-flex-row {
  flex-direction: row;
}

/*换行*/
.g-flex-wrap {
  flex-wrap: wrap;
}

/*转化成行元素*/
.g-inlineblock {
  display: inline-block;
}

/*转化成块元素*/
.g-block {
  display: block;
}

/*文字居中*/
.g-text-center {
  text-align: center;
}

/*绝对定位 垂直居中*/
.g-absolute-vcenter {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/*绝对定位 水平居中*/
.g-absolute-hcenter {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/*绝对定位 居中*/
.g-absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*禁止用户选中*/
.g-not-select {
  -webkit-user-select: none;
}

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;

}