css3中flex：1的使⽤
案例1：设置div的flex:1 会得到剩余的宽度
假设a是⽗组件，⽤flex布局设置⼦控件左右居中，width:400px；display:flex;
b是⼦控件，居左。width：150px;
c是⼦控件，居右。width不给，设置flex：1；
那么c.width = a.width-(a的margin和padding[左右])-b.width–(b的margin和padding[左右])-(c的margin和padding[左右])
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.stya{
display: flex;
border: 1px solid red;
width:400px
}
/*.stya div{
flex: 1;
}*/
.styb{
margin: 10px;
width: 200px;
border: 1px solid black;
height: 200px;
}
.styc{
border:1px solid green;
html的flex布局margin: 10px;
flex: 1;
}
</style>
</head>
<body>
<div class="stya">
<div class="styb"></div>
<div class="styc"></div>
</div>
</body>
</html>
案例2：使⽤flex:1 给div设置等宽，让所有弹性盒模型对象的⼦元素都有相同的长度，且忽略它们内部的内容：如下图所⽰
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex的使⽤</title>
<style>
#main,#main2
{
width:220px;
height:300px;
border:1px solid black;
display:flex;
}
#main div,#main2 div
{
flex:1;
margin:5px;
}
</style>
</head>
<body>
<div id="main">
<!--设置flex:1后，宽度不起作⽤-->
<div >红⾊</div>
<div >蓝⾊</div>
<div >带有更多内容的绿⾊ div</div>
</div>
<div id="main2">
<!--设置flex:1后，宽度不起作⽤-->
<div >红⾊</div>
<div >蓝⾊</div>
</div>
<p><b>注意:</b> Internet Explorer 9 及更早版本不⽀持 flex 属性。</p>
<p><b>注意:</b> Internet Explorer 10 通过 -ms-flex 属性来⽀持。 IE11 及更新版本完全⽀持 flex 属性 (不需要 -ms- 前缀)。</p> <p><b>注意:</b> Safari 6.1 (及更新浏览器) 通过 -webkit-flex 属性⽀持。</p>
<p><b>注意:</b> 设置flex:1后，宽度不起作⽤。</p>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。