伸缩盒（Flexble Box）——flex-shrink
flex-shrink：收缩比率
flex-shrink是放在子元素使用的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box {
width: 600px;
height: 700px;
border: 1px solid firebrick;
display: flex;
}
.box>div {
width: 200px;
height: 200px;
background-color: firebrick;
border: 1px solid #F5DEB3;
}
/* 四百分成八分，每份50px */
.box>div:nth-of-type(1) {
/* 要缩减150px，200px-150px */
/* 第一个div宽度为50px */
flex-shrink: 3;
}
.box>div:nth-of-type(2) {
/* 要缩减100px，200px-100px */
/* 第二个div宽度为100px */
flex-shrink: 2;
}
</style>
</head>
<body>
<div class="box">
<!-- 宽度总和为1000，超出四百 -->
<!-- 50px -->
<div></div>
<!-- 100px -->
<div></div>
<!-- 一下都是150px的宽度 450px-->
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
扫一扫
1169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
