display:flex;

转载于 2016-01-29 23:15:00 发布 · 56 阅读

0 ·

CC 4.0 BY-SA版权

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

本文详细介绍了CSS中Flex布局的基础用法及各个属性的作用，包括主轴和侧轴的对齐方式、项目的排列方向等，帮助读者更好地掌握响应式网页设计。

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
}