.white-space-nowrap{white-space:nowrap;}

.dpbk{display:block;}

/*flex布局*/
.flex{display: flex;}
.flex-wrap{flex-wrap: wrap;}
.flex-nowrap{flex-wrap: nowrap;}
.flex-shu{display: flex;flex-direction: column;}
.flex-shu-center{display: flex;flex-direction: column;align-items: center;}
.flex-shu-center-wrap{display: flex;flex-direction: column;align-items: center;flex-wrap: wrap;}
.flex-heng{display: flex;flex-direction: row;}
.flex-heng-center{display: flex;flex-direction: row;align-items: center;}
.flex-heng-bottom{display: flex;flex-direction: row;align-items:end;}
.flex-heng-center-wrap{display: flex;flex-direction: row;align-items: center;flex-wrap: wrap;}
.flex-1{flex:1;}
.flex-2{flex:2;}
.flex-grow-1{flex-grow: 1;}

/*grid布局*/
.grid{display: grid;}
.grid-1{display: grid;grid-template-columns: repeat(1,1fr);}
.grid-2{display: grid;grid-template-columns: repeat(2,1fr);}
.grid-3{display: grid;grid-template-columns: repeat(3,1fr);}
.grid-4{display: grid;grid-template-columns: repeat(4,1fr);}
.grid-5{display: grid;grid-template-columns: repeat(5,1fr);}
.grid-6{display: grid;grid-template-columns: repeat(6,1fr);}
.grid-7{display: grid;grid-template-columns: repeat(7,1fr);}


/*table布局*/
.dptb{display: table;table-layout: fixed;}
.dptc{display: table-cell;}

/*sticky*/
.sticky-top{position: sticky; top:0; z-index:5; background:#fff;}
.sticky-bottom{position: sticky; bottom:0; z-index:5; background:#fff;}