我想缩小这些弹性项目中的任何一个，但即使使用弹性收缩，我似乎也无法管理它。
我尝试更改.row（flex父级）的vh和vw。我增加和减少了弹性项目及其内容的边距和填充，但仍然没有收缩。我希望有任何更正。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex properties</title>
<link rel="stylesheet" href="dist/css/styles.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col container--box">
<h1 class="container--box__text">1</h1>
</div>
<div class="col container--box">
<h1 class="container--box__text">2</h1>
</div>
<div class="col container--box">
<h1 class="container--box__text">3</h1>
</div>
<div class="col container--box">
<h1 class="container--box__text">4</h1>
</div>
<div class="col container--box">
<h1 class="container--box__text">5</h1>
</div>
</div>
</div>
</body>
</html>
body {
background-color: #a09b9b;
}
body .container {
border: 2px solid green;
width: 70vw;
}
body .container .row {
display: flex;
flex-flow: row nowrap;
height: 25vh;
}
body .container .row .col:nth-child(1) {
flex-shrink: 1;
}
body .container .row .col:nth-child(2) {
flex-shrink: 1;
}
body .container .row .col:nth-child(3) {
flex-shrink: 3;
}
body .container .row .col:nth-child(4) {
flex-shrink: 1;
}
body .container .row .col:nth-child(5) {
flex-shrink: 1;
}
body .container .row .col {
background-color: red;
border: 1px solid black;
margin: 0;
padding: 50px;
height: 20%;
}
body .container .row .col .container--box__text {
font-size: 30px;
}
使 flex-shrink 属性发挥作用。
从 .container--box:
中删除固定填充
body .container .row .col .container--box {
padding: 0;
}
这是您更新的
cssbody {
background-color: #a09b9b;
}
body .container {
border: 2px solid green;
width: 70vw;
}
body .container .row {
display: flex;
flex-flow: row nowrap;
height: 25vh;
}
body .container .row .col {
flex: 1;
flex-basis: 0;
background-color: red;
border: 1px solid black;
margin: 0;
height: 20%;
}
body .container .row .col .container--box {
padding: 0;
}
body .container .row .col .container--box__text {
font-size: 30px;
}