CSS3 flex布局和box布局详解

电玩女神 2022-05-21 09:50 255阅读 0赞

弹性盒子布局是现在十分流行的布局方式，能让我们更好地操作子元素的布局。但是要注意，元素设置为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;
    
    }