@hzy1123581324/z-view-ui/static/css/common/flex.css

z-view-ui是使用vue3开发的组件，开发中,有部分组件功能未实现,慎用

/************弹性布局*****************/
.flex,
.flex-wrap,
.flex-nowrap,
.flex-reverse,
.flex-column,
.flex-row,
.flex-row-reverse,
.flex-column-reverse,
.flex-rg,
.flex-top,
.flex-btm,
.flex-center,
.flex-center-x,
.flex-center-y,
.flex-between,
.flex-between-x,
.flex-between-y,
.flex-around,
.flex-around-x,
.flex-around-y {

  /* #ifndef APP-NVUE */
  /*设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。*/
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  /* 09版 */
  /* #endif */

}

.flex-wrap {

  /* #ifndef APP-NVUE */
  -webkit-box-orient: horizontal;
  -webkit-box-lines: multiple;
  /*ie  09*/
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  /* #endif */
  flex-wrap: wrap;
}

.flex-nowrap {

  /* #ifndef APP-NVUE */
  -webkit-box-orient: horizontal;
  -webkit-flex-wrap: nowrap;
  -moz-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  -o-flex-wrap: nowrap;
  /* #endif */
  flex-wrap: nowrap;
}

.flex-reverse,.flex-column {
  /* #ifndef APP-NVUE */
  -webkit-box-orient: horizontal !important;
  -webkit-flex-direction: column !important;
  -moz-flex-direction: column !important;
  -ms-flex-direction: column !important;
  -o-flex-direction: column !important;
  /* #endif */
  flex-direction: column !important;
}
.flex-row {
  /* #ifndef APP-NVUE */
  -webkit-box-orient: vertical !important;
  -webkit-flex-direction: row !important;
  -moz-flex-direction: row !important;
  -ms-flex-direction: row !important;
  -o-flex-direction: row !important;
  /* #endif */
  flex-direction: row !important;
}
.flex-row-reverse{
  /* #ifndef APP-NVUE */
  -webkit-box-orient: vertical !important;
  -webkit-flex-direction: row-reverse!important;
  -moz-flex-direction:row-reverse!important;
  -ms-flex-direction: row-reverse!important;
  -o-flex-direction: row-reverse!important;
  /* #endif */
  flex-direction: row-reverse!important;
}
.flex-column-reverse {
  /* #ifndef APP-NVUE */
  -webkit-box-orient: horizontal !important;
  -webkit-flex-direction: column-reverse!important;
  -moz-flex-direction: column-reverse!important;
  -ms-flex-direction: column-reverse!important;
  -o-flex-direction: column-reverse!important;
  /* #endif */
  flex-direction: column-reverse!important;
}
.flex-rg {
  /* #ifndef APP-NVUE */
  -webkit-box-orient: horizontal;
  -webkit-box-pack: flex-end;
  /*09版*/
  /* 12版 */
  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  -ms-justify-content: flex-end;
  -o-justify-content: flex-end;
  /* #endif */
  justify-content: flex-end;

}

.flex-top {
  /* #ifndef APP-NVUE */
  
  -webkit-box-orient: horizontal;
  -webkit-align-content: flex-end;
  /*多行*/
  -moz-align-content: flex-start;
  /*多行*/
  -ms-align-content: flex-start;
  /*多行*/
  -o-align-content: flex-start;
  /*多行*/
  align-content: flex-start;
  /*多行*/
  -webkit-align-items: flex-start;
  /*单行*/
  -moz-align-items: flex-start;
  /*单行*/
  -ms-align-items: flex-start;
  /*单行*/
  -o-align-items: flex-start;
  /* #endif */
  /*单行*/
  align-items: flex-start;
  /*单行*/
  
}

.flex-btm{
  /* #ifndef APP-NVUE */
  -webkit-box-orient: horizontal;
  -webkit-align-content: flex-end;
  /*多行*/
  -moz-align-content: flex-end;
  /*多行*/
  -ms-align-content: flex-end;
  /*多行*/
  -o-align-content: flex-end;
  /*多行*/
  align-content: flex-end;
  /*多行*/
  -webkit-align-items: flex-end;
  /*单行*/
  -moz-align-items: flex-end;
  /*单行*/
  -ms-align-items: flex-end;
  /*单行*/
  -o-align-items: flex-end;
  /*单行*/
  /* #endif */
  align-items: flex-end;
  /*单行*/

}

.flex-center {
    /* #ifndef APP-NVUE */
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  /*09版*/
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
    /* #endif */
  justify-content: center;
  /* #ifndef APP-NVUE */
  -webkit-align-content: center;
  /*多行*/
  -moz-align-content: center;
  /*多行*/
  -ms-align-content: center;
  /*多行*/
  -o-align-content: center;
  /*多行*/
  align-content: center;
  /*多行*/

  -webkit-box-align: center;
  /*09版*/
  -webkit-align-items: center;
  /*单行*/
  -moz-align-items: center;
  /*单行*/
  -ms-align-items: center;
  /*单行*/
  -o-align-items: center;
  /*单行*/
  /* #endif */
  align-items: center;
  /*单行*/
}

.flex-center-x {
  /* #ifndef APP-NVUE */
  -webkit-box-orient: horizontal;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  /* #endif */
  justify-content: center;
}

.flex-center-y {
  /* #ifndef APP-NVUE */
  -webkit-box-orient: horizontal;
  -webkit-align-content: center;
  /*多行*/
  -moz-align-content: center;
  /*多行*/
  -ms-align-content: center;
  /*多行*/
  -o-align-content: center;
  /*多行*/
  align-content: center;

  /*多行*/
  -webkit-box-align: center;
  /*ie 09*/
  -webkit-align-items: center;
  /*单行*/
  -moz-align-items: center;
  /*单行*/
  -ms-align-items: center;
  /*单行*/
  -o-align-items: center;
  /* #endif */
  /*单行*/
  align-items: center;
  /*单行*/
}

.flex-between  {
  /* #ifndef APP-NVUE */
  -webkit-align-content: space-between;
  /*多行*/
  -moz-align-content: space-between;
  /*多行*/
  -ms-align-content: space-between;
  /*多行*/
  -o-align-content: space-between;
  /*多行*/
  align-content: space-between;
  /*多行*/

  -webkit-box-orient: horizontal;
  -webkit-box-pack: space-between;
  /*09版*/
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -o-justify-content: space-between;
  /* #endif */
  justify-content: space-between;

}

.flex-between-x {

  /* #ifndef APP-NVUE */
  -webkit-box-orient: horizontal;
  -webkit-box-pack: space-between;
  /*09版*/
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -o-justify-content: space-between;
  /* #endif */
  justify-content: space-between;
}

/* #ifndef APP-NVUE */

.flex-between-y{
  
  -moz-align-content: space-between;
  /*多行*/
  -ms-align-content: space-between;
  /*多行*/
  -o-align-content: space-between;
  /*多行*/
  align-content: space-between;
  /*多行*/
}
.flex-around {
  -webkit-box-orient: horizontal;
  -webkit-box-pack: space-around;
  /*09版*/
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  -ms-justify-content: space-around;
  -o-justify-content: space-around;
  justify-content: space-around;
  -webkit-align-content: space-around;
  /*多行*/
  -moz-align-content: space-around;
  /*多行*/
  -ms-align-content: space-around;
  /*多行*/
  -o-align-content: space-around;
  align-content: space-around;
  /*多行*/
 
}

.flex-around-x {
  -webkit-box-orient: horizontal;
  -webkit-box-pack: space-around;
  /*09版*/
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  -ms-justify-content: space-around;
  -o-justify-content: space-around;
  justify-content: space-around;

}




.flex-around-y {
  -webkit-box-orient: horizontal;
  -webkit-align-content: space-around;
  /*多行*/
  -moz-align-content: space-around;
  /*多行*/
  -ms-align-content: space-around;
  /*多行*/
  -o-align-content: space-around;
  /*多行*/
  align-content: space-around;
  /*多行*/
}

.grow,
.grow-full,
.grow-max,
.grow-max-w,
.grow-max-h,
.grow-min,
.grow-min-w,
.grow-min-h,
.grow-auto-full{
  -webkit-flex-grow: 1;
  -moz-flex-grow: 1;
  -ms-flex-grow: 1;
  -o-flex-grow: 1;
  flex-grow: 1;
}
/* 后期废弃 */
.grow-full {
  height: 50vh;
}
.grow-max{
  max-width: max-content;
  max-height: max-content;
}
.grow-max-w{
  width: max-content;
}
.grow-max-h{
  height: max-content;
}
.grow-min{
  width: min-content;
  height: min-content;
}
.grow-min-w{
  width: min-content;
}
.grow-min-h{
  height: min-content;
}
.grow-auto-full {
  min-height: min-content;
  /* max-height: fit-content; */
  /* min-width: min-content; */
  max-width: fit-content;
}

.shrink {
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-shrink: 0;
  -o-flex-shrink: 0;
  flex-shrink: 0;
}

/* #endif */