弹性项目属性

Posted 2020-08-31 AdiaLike

作为一名html5初学者，觉得这样整天粘代码并不是好的学习方法，需要优化改进，从今天开始，开始总结关键字，加注释 改掉之前总是粘代码的坏习惯

给div设置弹性布局，在div中加上display：flex；

然后在子元素上总的设置属性，或者在单独的子元素上单独设置属性

.box{

display: flex;
}
.box div{
width: 100px;
height: 100px;
background-color: pink;
border-radius: 50%;
color: white;
text-align: center;
line-height: 100px;
font-size: 30px;
}
.box>div:nth-child(2){

order: 1; /*order设置弹性的某个弹性元素的排序方式
默认值是0 如果在整个弹性容器中某一个item的order大于其他的那么该item就会往后排*/

flex-grow: 1;/*flex-grow设置弹性项目扩大比例 默认为0 也就是不做任何改变
如果某个元素的flex-grow大于其他的 就会把所有的(除了自身)剩余空间分配给该元素 
分配的空间为 父元素的宽减去所有子元素宽的和 再除以于所有元素flex-grow的和
再按比例分配给flex-grow大于0的子元素*/

flex-shrink: 2;/*flex-shrink默认值为1设置元素在被缩小时的缩小比例*/

}
.box>div:nth-child(3){
order: 2;
/*flex-grow: 2;*/
}