flex-box项目属性
order || flex-grow || flex-shrink || flex-basis
order(秩序)在不改变html结构的情况下进行项目排序,默认情况下是0,从低到高排序,数值越大越靠后。
li:nth-child(1){
order: 1;
}
li:nth-child(1){
order: 1;
}
li:nth-child(3){
order: 2;
}
如果值相同,那么按照html结构顺序排列先后。结果与上图一样。
li:nth-child(1){
order: 1;
}
li:nth-child(3){
order: 1;
}
flex-grow(
成长
)值为0或者正数,默认为0; flex-shrink(缩小)默认为1;0是关闭
li{
list-style: none;
width: 200px;
height: 200px;
background: #ddd;
font-size:50px;
margin: 10px;
flex-grow: 0;
}
如果将值改为1,就是打开了这个属性,自动撑满父级,并且会随着浏览器缩放而缩放,因为flex-shrink(缩小)默认为1是打开状态;0是关闭;
flex-basis(设置宽度)我觉得它就是设置宽度值的属性,可以使用width的各种单位%,em,rem,px,不过它必须要带单位比如0px,而不能写成0,
flex是这三种属性的简写flex-grow、flex-shrink和flex-basis。