美文网首页
CSS Flex flex-shrink 缩放的比例

CSS Flex flex-shrink 缩放的比例

作者: GaoEnron | 来源:发表于2020-01-01 16:40 被阅读0次

flex-shrink

通过该属性可以在元素超出边界之后提供缩放比例适应容器

          
            article div:nth-child(1) {
                flex-shrink: 0;
            }
            
            article div:nth-child(2) {
                flex-shrink: 1;
            }
            
            article div:nth-child(3) {
                flex-shrink: 2;
            }
            
            article * {
                width: 100px;
                height: 100px;
            }
Jietu20200101-163916.jpg

测试代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" content="width=device-width, initial-scale=1.0">
        <title></title>
        <style type="text/css">
            * {
                padding: 0px;
                margin: 0px;
            }
            
            body {
                padding-left: 0px;
                padding-top: 15px;
            }
            
            article {
                display: flex;
                border: solid 5px silver;
                border-color: #8A2BE2;
                width: 200px;
                height: 500px;
                background: red; /*  */
                flex-direction: row;
        
            }
            
            article div:nth-child(1) {
                flex-shrink: 0;
            }
            
            article div:nth-child(2) {
                flex-shrink: 1;
            }
            
            article div:nth-child(3) {
                flex-shrink: 2;
            }
            
            article * {
                width: 100px;
                height: 100px;
            }
            
        
            
            .first {
                background: #87CEEB;
            }
            
            .second {
                background: #FFA07A;
            }
            
            .third {
                background: lightpink;
            }
            .fourth {
                background: lightgreen;
            }
        
        </style>
    </head>
    <body>
        <article>
            <div class="first">第一</div>
            <div class="second">第二</div>
            <div class="third">第三</div>
            <!-- <div class="fourth">第四</div> -->
        </article>
    </body>
</html>

相关文章

网友评论

      本文标题:CSS Flex flex-shrink 缩放的比例

      本文链接:https://www.haomeiwen.com/subject/jscgoctx.html