首页 > 其他 > 详细

display:flex;

时间:2016-01-30 02:26:21      阅读:94      评论:0      收藏:0      [点我收藏+]

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

.box{
width:100%;height:500px;border:solid red 2px;
display:flex;
//flex-direction:row;//row-reverse | column | column-reverse;
// flex-wrap:nowrap;// | wrap | wrap-reverse;
//flex-flow:row-reverse wrap-reverse;
justify-content:flex-start;//| flex-end | center | space-between | space-around; 对齐方式
// align-items: flex-start; | flex-end | center | baseline | stretch;//高度不一致时对齐方式
align-content: flex-start;// | flex-end | center | space-between | space-around | stretch;
//多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用
}
.boxItem{
width:100px;
height:100px;
border:solid blue 1px;
// display:inline-flex;
//order:1;
//flex-grow:0;
//flex-shrink:1;
//flex:auto |none;
//align-self:auto | flex-start | flex-end | center | baseline | stretch;可覆盖align-items
}

display:flex;

原文:http://www.cnblogs.com/jayruan/p/5170292.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!