flex-shrink

最新推荐文章于 2024-05-10 17:07:06 发布

高手坟墓丶

最新推荐文章于 2024-05-10 17:07:06 发布

阅读量925

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_31070475/article/details/54600508

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、The sum of the length of the whole inner divs’ width >= the outer divs’

<!doctype html>
<html>
<head>
    <style type="text/css">
        #main{
            border: 1px solid black;    
            width: 400px;
            height: 300px;
            display: flex;
        }
        #div1{
            width: 50px;
            height: 70px;
            background-color: pink;
            flex-shrink:1;
            }
        #div2{
            flex-shrink:1;
            width: 50px;
            height: 70px;
            background-color: orange;
        }
        #div3{
            flex-shrink:1;
            width: 50px;
            height: 70px;
            background-color: green;
        }
        #div4{
            flex-shrink:1;
            width: 50px;
            height: 70px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
        <div id="div4"></div>
    </div>
</body>
</html>

这里写图片描述
The property flex-shrink does not work.

2、The sum of the length of the whole inner divs’ width < the outer divs’

<!doctype html>
<html>
<head>
    <style type="text/css">
        #main{
            border: 1px solid black;    
            width: 180px;
            height: 300px;
            display: flex;
        }
        #div1{
            width: 70px;
            height: 70px;
            background-color: pink;
            flex-shrink:2;
            }
        #div2{
            flex-shrink:1;
            width: 70px;
            height: 70px;
            background-color: orange;
        }
        #div3{
            flex-shrink:1;
            width: 70px;
            height: 70px;
            background-color: green;
        }
        #div4{
            flex-shrink:1;
            width: 70px;
            height: 70px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
        <div id="div4"></div>
    </div>
</body>
</html>

这里写图片描述

Sum of the length of the whole inner divs’ width should be 70*4=280px,but the outer div’s width is 180px,so it need reduceing 280-180=100px.And the proportion of the four inner div is 2-1-1-1,so first inner div’s width is 70-2/(2+1+1+1)(280-180)=30px,and others is 70-1/(2+1+1+1)(280-180)=50px.