日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

css設置彈性布局讓中間內容寬度自適應

作者：yunchong_zhao 更新時間： 2022-04-18 編程語言

其實這樣的布局又叫做雙飛翼布局，兩側不變中間在動
在沒有彈性布局的時候，就是通過浮動來實現的
有了彈性布局之后 就可以快速實現了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            box-sizing: border-box;
        }
        .parent {
            display: flex;
            flex-wrap: wrap;
        }
        .child {
            background-color: bisque;
            width: 100px;
            border: 1px solid #aaf;
        }
        .center {
            flex: 1;
        }
    </style>
</head>
<body>
   <div class="parent">
       <div class="child left">111</div>
       <div class="child center"></div>
       <div class="child"></div>
   </div>
</body>
</html>

只需要給中間的那個元素設置 flex: 1即可
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。

關注我 持續更新前端知識。

原文鏈接：https://yunchong.blog.csdn.net/article/details/121481539

相關推薦

欄目分類
最近更新