如何使用flexbox包含网格内的内容？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用flexbox包含网格内的内容？相关的知识，希望对你有一定的参考价值。
我想使用flexbox来包含网格的第二个div中的所有内容。在这种情况下，图片溢出，我不知道为什么。我希望它按高度调整大小并保持纵横比。
body {
height: 100%;
margin: 0;
}
.wrapper {
display: grid;
grid-template: repeat(2, 50vh) / repeat(3, 1fr);
background-color: #A9A9A9;
}
.wrapper>div:nth-child(even) {
background-color: #D3D3D3;
}
.pic2 {
display: flex;
flex-direction: column;
}
button {
flex: 1;
min-height: 40px;
background: green;
}
img {
flex: 1;
max-height: 100%;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="wrapper">
<div class="pic1">Div2</div>
<div class="pic2">
<button>Div2</button>
<img src="https://i.imgur.com/VHtXwib.jpg">
</div>
<div class="pic3">Div3</div>
<div class="pic4">Div4</div>
<div class="pic5">Div5</div>
<div class="pic6">Div6</div>
</div>
</body>
</html>答案
您必须使用div来设置按钮的最小高度。除非在调整图片大小时会导致奇怪的溢出问题。我尝试调整窗口大小，看看这是否是你想要的效果。
body {
height: 100%;
margin: 0;
}
.wrapper {
display: grid;
grid-template: repeat(2, 50vh) / repeat(3, 1fr);
background-color: #A9A9A9;
}
.wrapper div{
width:100%;
height:100%;
}
.wrapper > div:nth-child(even) {
background-color: #D3D3D3;
}
.pic2 {
display: flex;
flex-direction: column;
}
button {
flex: 1;
height:30%;
background: green;
}
img {
flex : 1;
max-height: 100%;
}
.custom-img{
display:block;
max-height:70%;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="wrapper">
<div class="pic1">Div2</div>
<div class="pic2">
<button>Div2</button>
<div class="custom-img">
<img src="https://i.imgur.com/VHtXwib.jpg">
</div>
</div>
<div class="pic3">Div3</div>
<div class="pic4">Div4</div>
<div class="pic5">Div5</div>
<div class="pic6">Div6</div>
</div>
</body>
</html>另一答案
正如您在CSS应用min-height: 40px max-height：100％时设置了按钮img，它实际上是获得父级大小，而不是减少按钮40px。
您可以设置max-height: calc(100% - 40px);，它将应用父级100％高度减去按钮的40px。
body {
height: 100%;
margin: 0;
}
.wrapper {
display: grid;
grid-template: repeat(2, 50vh) / repeat(3, 1fr);
background-color: #A9A9A9;
}
.wrapper>div:nth-child(even) {
background-color: #D3D3D3;
}
.pic2 {
display: flex;
flex-direction: column;
}
button {
flex: 1;
min-height: 40px;
background: green;
}
img {
flex: 1;
max-height: calc(100% - 40px);
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="wrapper">
<div class="pic1">Div2</div>
<div class="pic2">
<button>Div2</button>
<img src="https://i.imgur.com/VHtXwib.jpg">
</div>
<div class="pic3">Div3</div>
<div class="pic4">Div4</div>
<div class="pic5">Div5</div>
<div class="pic6">Div6</div>
</div>
</body>
</html>以上是关于如何使用flexbox包含网格内的内容？的主要内容，如果未能解决你的问题，请参考以下文章