flex-shink及flex-grow的用法

最新推荐文章于 2022-11-30 17:02:05 发布

how to fail

最新推荐文章于 2022-11-30 17:02:05 发布

阅读量298

点赞数 1

文章标签： flex

本文链接：https://blog.csdn.net/wd_nmdqgmzfj/article/details/113691892

版权

flex-shink的应用场景

在父元素弹性盒中,如果父元素的宽度写死,子元素的宽度也写死, 但子元素宽度的和大于父元素, 子元素的宽度会默认缩放,直到子元素的宽度和等于父元素代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .ul{
            width: 100%;
            /* background: green; */
            padding: 10px;
            display: flex;
            overflow-x: auto;
        }
        .li{
            list-style: none;
            width: 100%;
            height: 50px;
            /* flex-shrink: 0;  */
            flex-grow: 0;
            background: yellow;
            /*shrink 0代表不缩放 */

        }
        .ul2{
            width: 100%;
            /* background: green; */
            display: flex;
            height:500px;
            background: yellow;
            flex-direction: column;
        }
        p{
            background: green;
            flex-grow: 1;
        }
        
    </style>
</head>
<body>
    <ul class="ul">
        <li class="li">1</li>
        <li class="li">2</li>
        <li class="li">3</li>
        <li class="li">4</li>
        <li class="li">5</li>
    </ul>
    <ul class="ul2">
        <li class="li">1</li>
        <li class="li">2</li>
        <li class="li">3</li>
        <li class="li">4</li>
        <li class="li">5</li>
        <p>123123213</p>
    </ul>
</body>
</html>
// 当子元素不设置flex-shink为0  即不设置缩放时, 子元素默认被缩放如图1
加上flex-shink后,设置为0 禁止缩放,则宽度变为100%,  ul滚动条出现 
flex-grow  与平常较常用的flex:1 相似  也可说 flex : 1 剩余空间自动分配   是这几个的简写  flex-grow:1  也是剩余空间自动分配

在这里插入图片描述

how to fail

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex-shink及flex-grow的用法

flex-shink的应用场景在父元素弹性盒中,如果父元素的宽度写死,子元素的宽度也写死, 但子元素宽度的和大于父元素, 子元素的宽度会默认缩放,直到子元素的宽度和等于父元素代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca
复制链接

扫一扫