flex-grow flex-shrink注意点

最新推荐文章于 2022-10-18 19:18:29 发布

贵哥的编程之路(热爱分享)

最新推荐文章于 2022-10-18 19:18:29 发布

阅读量774

点赞数 1

分类专栏： css系列（精通精通）

本文链接：https://blog.csdn.net/qq_37805832/article/details/108742902

版权

css系列（精通精通）专栏收录该内容

48 篇文章 0 订阅

订阅专栏

<!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>