想要这个布局的代码我不会写

img

5 元素设置flex-grow:1;
你题目的解答代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<style>
#box{
    display:flex;
    width:800px;
    margin:0;
    padding:0px;
    list-style:none;
    background-color:#f00;
}
#box li{
    width:100px;
    height:100px;
    border:1px solid #aaa;
    background-color: #fff;
    text-align:center;
    margin: 10px;
}
#box li:nth-child(5){
    flex-grow:1;
}
</style>
</head>
<body>
<ul id="box" class="box">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
</body>
</html>

img

如有帮助，望采纳！谢谢!