CCS彈性盒子中間自適應怎么設置？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容，讓我們一起來看看吧！
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>彈性盒子中間自適應</title>
<style>
/*
父級添加
display:-webkit-box;
display:-moz-box;
子級添加
box-flex:1;
-webkit-box-flex:1;
-moz-box-flex:1;
定義子容器占的比例, 具體計算規則,父容器-定寬,剩余的按比例等分。
但實際計算中并沒有實現等分(子容器中還有元素時),常用的解決方法是,
數字 1 為所占的份數
添加寬度百分比和box-sizing: border-box;（解決border和padding問題）
*/
#wrap{
width:100%;
margin:0 auto;
background: #ccc;
display:-webkit-box;
display:-moz-box;
}
#left{
width:100px;
padding:10px;
background:#09F;
}
#content{
/*width:400px;*/
padding:10px;
background:#30C;
box-flex:1;
-webkit-box-flex:1;
-moz-box-flex:1;
}
#right{
/*width:100px;*/
padding:10px;
background:#F0F;
box-flex:1;
-webkit-box-flex:1;
-moz-box-flex:1;
}
#left,#content,#right{
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
</style>
</head>
<body>
<p id="wrap">
<p id="left">#f00</p>
<p id="content">#0f0</p>
<p id="right">#00F</p>
</p>
</body>
</html>感謝各位的閱讀！看完上述內容，你們對CCS彈性盒子中間自適應怎么設置大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
