flex-shrink 布局

最新推荐文章于 2024-10-05 09:05:35 发布

RPIKACU

最新推荐文章于 2024-10-05 09:05:35 发布

阅读量85

点赞数

文章标签： html5 css html

本文链接：https://blog.csdn.net/RPIKACU/article/details/120616056

版权

 <style>
        .parent {
            width: 300px;
            height: 300px;
            background-color: pink;

            display: flex;
            justify-content: space-between;

            align-items: center;
        }

        .parent div {
            width: 180px;
            height: 60px;
            background-color: skyblue;
            flex-basis: 60px;
        }
        .parent div:nth-child(1) {
            align-self: flex-start;
        }
        
        .parent div:nth-child(2) {
            background-color: orange;
            /* flex-basis: auto;
            flex-flow: 1; */

            flex: 1 0;  

            align-self: flex-end;
            /* flex-grow: 1 ; flex-shrink: 1; flex-basis: auto  */

            /* 用来控制 子盒子 是否会被压缩  默认1  */
            /* flex-shrink: 0; */
            /* 把父级容器 剩余空间 按份数 进行划分 */       
        }
    </style>
</head>
<body>
    <div class="parent">
        <div></div>
        <div></div>
        <div></div>
    </div>

</body>