鍍金池/ 問(wèn)答/HTML/ flex實(shí)現(xiàn)這種布局

flex實(shí)現(xiàn)這種布局

clipboard.png
子元素有固定寬度，增加多個(gè)div超過(guò)父元素寬度后，子元素寬度縮小，請(qǐng)問(wèn)怎么實(shí)現(xiàn)

回答
編輯回答
毀憶

使用 flex-shrink 屬性。
如果你正在看的是阮一峰老師的文章，那篇文章里就有講的，你可以找下

2017年6月4日 02:56
編輯回答
法克魷
<!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

2017年11月28日 00:16