You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
2.7 KiB
88 lines
2.7 KiB
<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>
|
|
#div0 {
|
|
display: flex;
|
|
width: 400px;
|
|
height: 500px;
|
|
background-color: aqua;
|
|
}
|
|
|
|
#div0 div {
|
|
width: 200px;
|
|
height: 200px;
|
|
background-color: blue;
|
|
/* flex-basis 属性用于设置或检索弹性盒伸缩基准值（就是设置子元素的宽度），上面的 width 将失效 */
|
|
/* flex-basis: 30%; 30% 是父元素宽度的 30% ，也可以使用 px、rem */
|
|
}
|
|
|
|
#div0 div:nth-child(1) {
|
|
flex-basis: 50px;
|
|
|
|
/* flex-grow 属性用于设置或检索弹性盒子的扩展比率 */
|
|
|
|
/* 计算过程：
|
|
父元素宽度 - 第一个子元素宽度 - 第二个子元素宽度 400 - 50 - 100 = 250px
|
|
再将剩余的 250px 的宽度 除以 总份数（全部子元素的份数），因为第一个和第二个子元素都设置了 flex-grow: 1 ，表示每个子元素占一份，总共 2 份
|
|
250 / 2 = 125 每份为 125 px
|
|
再将子元素的宽度 + 占比份数 x 每份宽度（1 x 125, 如果是两份就是 2 x 125）
|
|
第一个子元素宽度： 50 + 125 = 175
|
|
第二个子元素宽度： 100 + 125 = 225
|
|
*/
|
|
flex-grow: 1;
|
|
}
|
|
|
|
#div0 div:nth-child(2) {
|
|
flex-basis: 100px;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
#div1 {
|
|
display: flex;
|
|
margin-top: 50px;
|
|
width: 400px;
|
|
height: 500px;
|
|
background-color: aqua;
|
|
}
|
|
|
|
#div1 div {
|
|
width: 200px;
|
|
height: 200px;
|
|
background-color: blue;
|
|
}
|
|
|
|
#div1 div:nth-child(1) {
|
|
flex-basis: 300px;
|
|
|
|
/* flex-shrink 是设置弹性盒子的缩小比率 */
|
|
/* 计算过程跟 flex-grow 一样
|
|
计算超出部分：父元素宽度 - 所有子元素宽度 400 - 300 - 300 = -200
|
|
超出部分 / 所有子元素份数的总和 200 / 4 = 50
|
|
第一个子元素：300 - 50 x 1 = 250
|
|
第二个子元素：300 - 50 x 3 = 150
|
|
*/
|
|
flex-shrink: 1;
|
|
}
|
|
|
|
#div1 div:nth-child(2) {
|
|
flex-basis: 300px;
|
|
flex-shrink: 3;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="div0">
|
|
<div>1</div>
|
|
<div>2</div>
|
|
</div>
|
|
|
|
<div id="div1">
|
|
<div>3</div>
|
|
<div>4</div>
|
|
</div>
|
|
</body>
|
|
</html>
|