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是关闭;