css3
弹性盒模型 flex
1.父 节点元素 样式
parentNode {
display:flex;----------------------建立和模型环境
flex-flow: row nowrap; --------------------------- row (横排从左到右) column(竖排) nowrap( 不换行) wrap(换行)
justify-content:space-around ------------------- space-around(盒子外侧margin间隔 相同,都平均分配)
--------------------flex-start(左对齐) flex-end(右对齐) center(居中对齐) space-between(两端对齐)
align-item:flex-start ---------------------- -----------flex-start(顶端对齐) flex-end(低端对齐) 。。。。。。
}
2.子 元素 样式
childNode{
order 属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
flex-grow (默认为0,) 属性定义项目的放大比例,即如果存在剩余空间,也不放大。 例如比例参数:1 2 1
flex-shrink (默认为1,) 属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
flex-basis )(默认值为auto) 项目占据的主轴空间(main size) (比如350px)
flex (默认值为0 1 auto) flex属性是flex-grow, flex-shrink 和 flex-basis的简写,
align-self: auto | flex-start | flex-end | center | baseline | stretch; 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖
}