验证中...
码云 IDEA 插件最新版本发布,支持 Pull Request
语言: CSS
分类: CSS 技巧
最后更新于 2018-12-09 10:37
flex.css
原始数据 复制代码
*{
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;
}

评论列表( 0 )

你可以在登录后,发表评论

搜索帮助