flex实现这种布局

1234

24523

发布于
2018-03-23

子元素有固定宽度，增加多个div超过父元素宽度后，子元素宽度缩小，请问怎么实现

css

阅读 1.8k

2 个回答

得票最新

zzgzzg00

3.7k21420

发布于
2018-03-23

<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
        *{
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }
        div{
            display: flex;
            background-color: red;
        }
        div>span{
            display: inline-block;
            width: 100px;
            height: 100px;
            flex-shrink: 1;
            margin-left: 10px;
            background-color: white;
        }
    </style>
</head>
<body>
<div>
</div>
<script>
    setInterval(function(){
        document.querySelector('div').appendChild(document.createElement('span'));
    },1000);
</script>
</body>
</html>

flex-shrink