/* flex布局 */
.flex{
    display: flex;
}
.flex-row{
    flex-direction:row;
}
.flex-column{
    flex-direction: column;
}
.flex-wrap{
    flex-wrap: wrap;
}
.flex-nowrap{
    flex-wrap: nowrap;
}
/* 横向的排列方式 */
.flex-start{
    justify-content: flex-start;
}
.flex-end{
    justify-content: flex-end;
}
.flex-center{
    justify-content:center;
}
.flex-betwwen{
    justify-content: space-between;
}
.flex-around{
    justify-content: space-around;
}

/* 宗向的排列方式 */
.flex-column-start{
    align-content: flex-start;
}
.flex-column-end{
    align-content: flex-end;
}
.flex-column-center{
    align-content:center;
}
.flex-column-between{
    align-content: space-between;
}
.flex-column-around{
    align-content:space-around;
}


/* 浮动布局 */
.float-l{
    float: left;
}
.float-r{
    float: right;
}
.clear-float::after{
    content:"";
    display: block;
    clear: both;
}

/* 定位布局 */
.relative{
    position: relative;
}
.absolute{
    position: absolute;
    top:0;
    left:0;
    width:100%;
}
.fixed{
    position: fixed;
    top:0;
    left:0;
    width:100%;
}


/* 元素之间的转换 */
.inline{
    display: inline;
}
.inline-block{
    display: inline-block;
}
.block{
    display: block;
}
.hide{
    display: none;
}