弹性盒模型
目的:提供了一种更有效的方式来布置,对齐和分布在容器之间的各项内容,即使他们的大小是未知变化的。
让容器有能力改变项目的宽高,以填满可用空间。(最适合小规模布局)
常见的属性
弹性盒模型使用需声明 display:flex/(display:inline-flex)
flex-direction
写在父级css中,作用于子级,检索子级在盒子中的位置(即子级的排列顺序)
可取值分别为row(横向,左到右) row-reverse(反横向)
column(纵向)column-reverse(反纵向)
flex-wrap
写在父级,作用于子级,检索子级是否超出父级(是否换行)
可取值nowrap(不换行) wrap(换行) wrap-reverse(反转wrap排列)
flex-flow
复合属性 写在父级,作用于子级
先写排列方式,再写是否换行
justify-content
检索弹性盒子在主轴(x)方向上的对其方式
写在父级,作用于子级
取值 flex-start (左对齐) flex-end(右对齐) center(居中)
space-between (两端居左居右,中间等间距)
space-around (n盒子的个数均分为n个空间,盒子在各自空间内居中)
align-items
检索盒子在Y轴上的对齐方式
写在父级,作用于子级
取值 flex-start(置顶) flex-end(置底) center(居中)
baseline(与基线对齐) stretch(置顶+置底,高度受到min-height与max-height制约)
align-content
检索换行时对齐方式
写在父级,作用于子级
取值 flex-start(置顶) flex-end(置底) center(居中)
space-between(置顶+置底,中间居中)
space-around(纵向平分空间,各行居中显示)
stretch (纵向平分空间,各行以最大方式显示)
order
排列顺序
写在子级
取值为阿拉伯数字,值越小,排位越靠前。
flex-grow
分配剩余空间
写在子级
取值为阿拉伯数字,值越大,分配空间越多