弹性盒子:是一种新布局属性,让元素有能力控制子元素排列
语法:display:flex|inline-flex;
注:变成弹性盒子后,里面项目就有了其他属性,可以在容器里拉伸或收缩,改变排列顺序与方式
容器身上的属性
-
设置主轴的方向
flex-direction:row|column|row-reverse|column-reverse;
-
设置项目在主轴上的排列方式
justify-content:flex-start|flex-end|center|space-around|space-between|space-evenly均匀分隔
注:around在盒子之间间隔是盒子与屏幕边框间隔的两倍,between盒子与屏幕边框没间隔间隔全在盒子之间,evenly盒子与屏幕盒子与盒子之间间隔一样
-
设置项目是否换行
flex-wrap:nowrap|wrap|wrap-reverse
-
项目在侧轴上的对齐方式
align-items:stretch拉伸|flex-start|flex-end|center|baseline基线
注:stretch在项目有高度时候,项目不会有拉伸效果
注:该属性对应侧轴只有一根轴线
5. 设置多根横轴线排列方式
align-content:streth|flex-start|flex-end|center|space-around|space-between|space-evenly;
6. 设置主轴方向和是否换行的复合属性
flex-flow:flex-direction flex-wrap;
项目身上的属性
- 项目是否缩小
flex-shrink:1;
会缩小|0 不缩小
注:数字缩小值,除以所有项目值,乘以数字 - 是否放大
flex-grow:1;
会放大|0 不放大
注:设置后项目会自己放大填充多余空间 - 项目尺寸
flex-basis:auto|*px;
- 放缩复合属性
flex:flex-grow flex-shrink flex-basis;
注:flex:1;代表1 1 auto - 项目的排序order:数字;
注:元素默认值是0;按从小到大排列 - 设置项目单独对齐方式
align-self:strech拉伸|flex-start|flex-end|center|baseline;
注:该属性加在项目上,也就是子元素身上