代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>131-伸缩布局</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
width: 600px;
height: 600px;
border: 1px solid #000;
margin: 100px auto;
display: flex;
flex-direction: column;/*主轴是垂直方向的*/
}
ul>li{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 30px;
background: red;
}
ul>li:nth-child(1){
/*
1.如果没有指定flex-grow属性, 或者flex-grow:的值是0, 那么当前的伸缩项不会被扩充
2.如果flex-shrink的值是0, 那么当前的伸缩项不会被缩小
3. 注意点
前面所写的注释都是说宽度扩充或者宽度缩小, 但是这种说法是不严谨的
也有可能扩充和缩小的是高度, 到底是宽度还是高度是由主轴决定的, 扩充和缩小的是主轴方向上的值
也就是说如果主轴是水平方向的, 那么扩充和缩小的就是宽度
也就是说如果主轴是垂直方向的, 那么扩充和缩小的就是高度
*/
flex-grow: 0;
/*flex-shrink: 0;*/
}
ul>li:nth-child(2){
background: green;
flex-grow: 4;
/*flex-shrink: 4;*/
}
ul>li:nth-child(3){
background: blue;
flex-grow: 8;
/*flex-shrink: 8;*/
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
