验证中...
开源中国 2018 年度最后一场技术盛会邀你来约~错过就要等明年啦!点此立即预约
Languages: CSS
Categories: CSS 技巧
Latest update 2018-10-16 10:01
flex.css
Raw Copy
*{
margin: 0;
padding: 0;
}
/*弹性布局*/
.flex{
display: flex;
}
/*居中*/
.flex-center{
margin: auto;
}
/*主线轴*/
.flex-x-reverse{
flex-direction: row-reverse;
}
/*主轴线对齐*/
.flex-x-flex-end{
justify-content: flex-end;
}
.flex-x-center{
justify-content: center;
}
.flex-x-between{
justify-content: space-between;
}
.flex-x-space-around{
justify-content: space-around;
}
/*纵轴*/
.flex-y{
flex-direction: column;
}
.flex-y-reverse{
flex-direction: column-reverse;
}
/*纵轴对齐*/
.flex-y-flex-start{
align-items: flex-start;
}
.flex-y-flex-end{
align-items: flex-end;
}
.flex-y-center{
align-items: center;
}
.flex-y-baseline{
align-items: baseline;
}
/*换行*/
.flex-wrap{
flex-wrap:wrap;
}
.flex-wrap-reverse{
flex-wrap:wrap-reverse;
}
/*多行对齐*/
.flex-align-content-flex-start{
align-content:flex-start
}
.flex-align-content-flex-end{
align-content:flex-end;
}
.flex-align-content-center{
align-content:center;
}
.flex-align-content-space-between{
align-content:space-between;
}
.flex-align-content-space-around{
align-content:space-around;
}
/*item对齐*/
.flex-align-self-auto{
align-self:auto;
}
.flex-align-self-flex-start{
align-self:flex-start;
}
.flex-align-self-flex-end{
align-self:flex-end;
}
.flex-align-self-center{
align-self:center;
}
.flex-align-self-baseline{
align-self:baseline;
}
.flex-align-self-stretch{
align-self:stretch;
}

Comment list( 0 )

You need to Sign in for post a comment

Help Search

12_float_left_people 12_float_left_close