到父级div设置了 display：flex 时要控制子div时可以使用flex
设置了flex-basis : 100px；时盒子宽度会变成100px width属性会失效
设置了flex-grow : 份额； 时会把父剩余宽度填满，分成几份加到原本宽度上去
<style>
#div0{
display: flex;
width: 400px;
height: 500px;
background-color: yellowgreen;
}
#div0 div{
width: 200px;
height: 200px;
background-color: yellow;
/* flex-basis: 50px; */ /* ==> */ /* width: 50px; width失效*/
}
#div0 div:nth-child(1){
/*
扩大份额
flex-grow: 份额;
400-50-100 = 250
一共5份 每份50px
第一个div 1份 50+50=100 宽度100px
第二个div 4份 100+200=300 宽度300px
*/
/*
缩小份额跟扩大同理 超出部分除以超出的份数再减去原来的值
flex-shrink: 份额;
*/
flex-basis: 50px;
/* 所占的份额 */
flex-grow: 1;
}
#div0 div:nth-child(2){
flex-basis: 100px;
flex-grow: 4;
}
</style>
</head>
<body>
<div id="div0">
<div></div>
<div></div>
</div>
</body>
</html>运行结果：
特殊写法：
扫一扫
223
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
