chaihongjun.me

flex布局容器和伸缩项手册

...
<div class="container">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
</div>
...
.container {
    flex-direction : row(default) | row-reverse | column | column-reverse #容器内项目的排列方向(默认横向排列) 
    flex-wrap:nowrap | wrap(default) | wrap-reverse #容器内项目换行方式 
    flex-flow 以上两个属性的简写方式 
    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 #定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
}
.son{
    flex-grow:<number> #非负数的扩展比率
    flex-shrink:<number>   #用数值来定义收缩比率。不允许负值
    flex-basis:<length> | <percentage> | auto | content #<length>:用长度值来定义宽度。不允许负值<percentage>:用百分比来定义宽度。不允许负值auto:无特定宽度值,取决于其它属性值content:基于内容自动计算宽度 
    flex:none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>
    align-self:auto | flex-start | flex-end | center | baseline | stretch #定义flex子项单独在侧轴(纵轴)方向上的对齐方式
    order:<integer> #用整数值来定义排列顺序,数值小的排在前面。可以为负值。
}

以上12个属性分别适用于父级容器和子伸缩项

参考资料:http://www.css88.com/book/css/properties/flex/index.htm

知识共享许可协议本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。作者:chaihongjun»