flex布局常用汇总

flex布局常用汇总

.flex{
  display:-webkit-box;
  display:-moz-box;
  display:-webkit-flex;
  display:-moz-flex;
  display:-ms-flexbox;
  display:flex
}
.flex-full{
  flex: 1
}
.flex-row{
  -webkit-box-direction: normal;
  -webkit-box-orient:horizontal;
  -moz-flex-direction:row;
  -webkit-flex-direction:row;
  flex-direction:row
}
.flex-column{
  -webkit-box-direction:normal;
  -webkit-box-orient:vertical;
  -moz-flex-direction:column;
  -webkit-flex-direction:column;
  flex-direction:column
}
.flex-start{
  -webkit-box-pack:start;
  -moz-justify-content:flex-start;
  -webkit-justify-content:flex-start;
  justify-content:flex-start
}
.flex-center{
  -webkit-box-pack:center;
  -moz-justify-content:center;
  -webkit-justify-content:center;
  justify-content:center
}
.flex-end{
  -webkit-box-pack:end;
  -moz-justify-content:flex-end;
  -webkit-justify-content:flex-end;
  justify-content:flex-end
}
.flex-between{
  -webkit-box-pack:justify;
  -moz-justify-content:space-between;
  -webkit-justify-content:space-between;
  justify-content:space-between
}
.flex-around{
  -webkit-box-pack:around;
  -moz-justify-content:space-around;
  -webkit-justify-content:space-around;
  justify-content:space-around
}
.flex-evenly{
  -webkit-box-pack:evenly;
  -moz-justify-content:space-evenly;
  -webkit-justify-content:space-evenly;
  justify-content:space-evenly
}
.flex-items-start{
  -webkit-box-align:start;
  -moz-align-items:flex-start;
  -webkit-align-items:flex-start;
  align-items:flex-start
}
.flex-items-center{
  -webkit-box-align:center;
  -moz-align-items:center;
  -webkit-align-items:center;
  align-items:center
}
.flex-items-end{
  -webkit-box-align:end;
  -moz-align-items:flex-end;
  -webkit-align-items:flex-end;
  align-items:flex-end
}
.flex-wrap{
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap:wrap
}
.flex-nowrap{
  -webkit-flex-wrap: nowrap;
  -moz-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  -o-flex-wrap: nowrap;
  flex-wrap:nowrap
}