flex-grow flex-shrink注意点_综合

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>131-伸缩布局</title><style>*{
    margin: 0;padding: 0;}ul{
    list-style: none;width: 600px;height: 600px;border: 1px solid #000;margin: 100px auto;display: flex;flex-direction: column;/*主轴是垂直方向的*/}ul>li{
    width: 100px;height: 100px;line-height: 100px;text-align: center;font-size: 30px;background: red;}ul>li:nth-child(1){
    /*1.如果没有指定flex-grow属性, 或者flex-grow:的值是0, 那么当前的伸缩项不会被扩充2.如果flex-shrink的值是0, 那么当前的伸缩项不会被缩小3. 注意点前面所写的注释都是说宽度扩充或者宽度缩小, 但是这种说法是不严谨的也有可能扩充和缩小的是高度, 到底是宽度还是高度是由主轴决定的, 扩充和缩小的是主轴方向上的值也就是说如果主轴是水平方向的, 那么扩充和缩小的就是宽度也就是说如果主轴是垂直方向的, 那么扩充和缩小的就是高度*/flex-grow: 0;/*flex-shrink: 0;*/}ul>li:nth-child(2){
    background: green;flex-grow: 4;/*flex-shrink: 4;*/}ul>li:nth-child(3){
    background: blue;flex-grow: 8;/*flex-shrink: 8;*/}</style>
</head>
<body>
<ul><li>1</li><li>2</li><li>3</li>
</ul>
</body>
</html>