flex布局总结

 

关于display:flex 弹性模型盒的部分知识

两个概念 1.排列方向 2.对齐方式

基于容器的属性有以下几个

项目排列方式永远与主轴方向一致  有四个属性  

flex-direction: row/row-reverse column/column-reverse 容器属性 决定项目的主轴排列方向
flex-wrap:nowrap/wrap/wrap-reverse 决定主轴方向项目是否换行
两个属性一起些 flex-flow:row wrap
justfity-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
strech

 注意多个交叉轴和主轴 单交叉轴的区别

基于单个项目的属性

order:0 数值越大越靠后

flex-grow 项目的放大比例 [0,n] 如果全部项目为1 则等分剩余空间  有三个项目 整个容器宽500 第一个项目200 第二三个都为50   则剩余空间为 500-200-100 然后分成总共A份 赋予此N份项目

flex 按照剩余空间设置项目大小 和上面的区别在于它连同自己都规划到剩余空间 例如 有三个项目 整个容器宽500 第一个项目200 则剩余空间为 500-200

flex-shrink 定义项目的缩小比例 默认值1 即使存在不够的剩余空间也不缩小 否则会将不够的剩余空间分配给各个项目去缩减 例如 容器宽度为270 三个项目 每个项目都为100 则每个项目要缩减 3*100-270 然后分成总共A份 赋予此N份项目去做缩减

lex-basis 伸缩基点

align-self 设置单个项目的对齐方式和其它项目对齐方式不一样

align-self:(flex-start/flex-end/center/baseline/stretch)