.flex{
  display: flex;
}

/*主轴对齐方式  */
.flex-row{
  display: flex;
  flex-direction: row;
}
.flex-row-reverse{
  display: flex;
  flex-direction: row-reverse;
}
.flex-column{
  display: flex;
  flex-direction: column;
}
.flex-column-reverse{
  display: flex;
  flex-direction: column-reverse;
}
.flex-wrap{
  display: flex;
  flex-wrap: wrap;
}
.flex-nowrap{
  display: flex;
  flex-wrap: nowrap;
}
.flex-wrap-reverse{
  display: flex;
  flex-wrap: wrap-reverse;
}
.flex-start{
  display: flex;
  justify-content: flex-start;
}
.flex-end{
  display: flex;
  justify-content: flex-end;
}
.flex-center{
  display: flex;
  justify-content: center;
}
.flex-between{
  display: flex;
  justify-content: space-between;
}
.flex-around{
  display: flex;
  justify-content: space-around;
}

/*交叉轴对齐方式  */
.start-items{
  display: flex;
  align-items: flex-start;
}
.end-items{
  display: flex;
  align-items: flex-end;
}
.center-items{
  display: flex;
  align-items: center;
}
.baseline-items{
  display: flex;
  align-items: baseline;
}
.stretch-items{
  display: flex;
  align-items: stretch;
}

/*独立交叉轴对齐方式  */
.start-self{
  display: flex;
  align-self: flex-start;
}
.end-self{
  display: flex;
  align-self: flex-end;
}
.center-self{
  display: flex;
  align-self: center ;
}
.baseline-self{
  display: flex;
  align-self: baseline;
}
.stretch-self{
  display: flex;
  align-self: stretch;
}

/*多根轴线的对齐方式  */
.start-content{
  display: flex;
  align-content: flex-start;
}
.end-content{
  display: flex;
  align-content: flex-end;
}
.center-content{
  display: flex;
  align-content: center ;
}
.around-content{
  display: flex;
  align-content: space-around ;
}
.between-content{
  display: flex;
  align-content: space-between;
}
.stretch-content{
  display: flex;
  align-content: stretch;
}

/* flex-grow属性--定义项目的放大比例 */
.grow-0{
  flex-grow: 0;
}
.grow-1{
  flex-grow: 1;
}
.grow-2{
  flex-grow: 2;
}
.grow-3{
  flex-grow: 3;
}
.grow-4{
  flex-grow: 4;
}
.grow-5{
  flex-grow: 5;
}
.grow-6{
  flex-grow: 6;
}
.grow-7{
  flex-grow: 7;
}
.grow-8{
  flex-grow: 8;
}
.grow-9{
  flex-grow: 9;
}

/* flex-shrink属性--定义项目的缩小比例 */
.shrink-0{
  flex-shrink: 0;
}
.shrink-1{
  flex-shrink: 1;
}
.shrink-2{
  flex-shrink: 2;
}
.shrink-3{
  flex-shrink: 3;
}
.shrink-4{
  flex-shrink: 4;
}
.shrink-5{
  flex-shrink: 5;
}
.shrink-6{
  flex-shrink: 6;
}
.shrink-7{
  flex-shrink: 7;
}
.shrink-8{
  flex-shrink: 8;
}
.shrink-9{
  flex-shrink: 9;
}