我有一个带子div的flex div（.parent）（您猜对了，.child），该子div包裹了更多行。我的问题是，在不破坏我的“网格”的情况下，我似乎无法使每个div .card的边框具有相同的高度。当我尝试为.child等指定特定高度时，这些高度看起来很糟糕，因为并非每一行都有相同的内容长度。我已经看到了这样的示例，但是不确定如何使用flex来解决它，以便使多行具有相同的高度（没有每个“单元格”具有相同的高度并产生很多混乱。
.parent {
display: flex;
flex-grow: 1;
flex-wrap: wrap;
margin: 0 auto;
max-width: 100%;
width: 100%;
}
.child {
height: 100%;
margin-top: 20px;
margin: 1%;
display: inline-flex;
}
.a-title {
font-size: 1.3em;
font-weight: 700;
width: 100%;
}
.child .card {
border-radius: 3px;
border: 1px solid;
font-size: .8em;
padding: 10px;
display: inline-block;
overflow: hidden;
/* height: 600px; */
}<div class="parent">
<div class="child">
<div class="card">
<img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
<p class="a-title">
Title
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
<a href="#">Some fake link</a>
</p>
</div>
</div>
<div class="child">
<div class="card">
<img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
<p class="a-title">
Title
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
<a href="#">Some fake link</a>
</p>
</div>
</div>
<div class="child">
<div class="card">
<img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
<p class="a-title">
Title
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
<a href="#">Some fake link</a>
</p>
</div>
</div>
<div class="child">
<div class="card">
<img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
<p class="a-title">
Title
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
<a href="#">Some fake link</a>
</p>
</div>
</div>
<div class="child">
<div class="card">
<img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
<p class="a-title">
Title
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
<a href="#">Some fake link</a>
</p>
</div>
</div>
<div class="child">
<div class="card">
<img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
<p class="a-title">
Title
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
<a href="#">Some fake link</a>
</p>
</div>
</div>
<div class="child">
<div class="card">
<img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
<p class="a-title">
Title
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
<a href="#">Some fake link</a>
</p>
</div>
</div>
</div>
尝试避免此处发生的情况（当前代码示例）：https://jsfiddle.net/4gy7fzw1/
没有设置高度的代码示例：https://jsfiddle.net/t2yzfkm9/
答案 0 :(得分：1)
通常，要使flexbox布局中的每一列都具有相同的高度，您要做的就是在父元素（display: flex）上指定.parent。在特定情况下，您需要在子元素（height: 100%）上设置.child。
在flexbox中，由于百分比驱动的值基于包含块的高度，因此height: 100%实际上会执行您期望的相反。 height: auto将允许元素扩展（这是默认设置）。
简而言之，要使列的高度相等，只需从height: 100%中删除 .child：
.parent {
display: flex;
flex-grow: 1;
flex-wrap: wrap;
margin: 0 auto;
max-width: 100%;
width: 100%;
}
.child {
/*height: 100%;*/
margin-top: 20px;
margin: 1%;
display: inline-flex;
}
.a-title {
font-size: 1.3em;
font-weight: 700;
width: 100%;
}
.child .card {
border-radius: 3px;
border: 1px solid;
font-size: .8em;
padding: 10px;
display: inline-block;
overflow: hidden;
/* height: 600px; */
}<div class="parent">
<div class="child">
<div class="card">
<img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
<p class="a-title">
Title
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
<a href="#">Some fake link</a>
</p>
</div>
</div>
<div class="child">
<div class="card">
<img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
<p class="a-title">
Title
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
<a href="#">Some fake link</a>
</p>
</div>
</div>
<div class="child">
<div class="card">
<img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
<p class="a-title">
Title
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
<a href="#">Some fake link</a>
</p>
</div>
</div>
<div class="child">
<div class="card">
<img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
<p class="a-title">
Title
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
<a href="#">Some fake link</a>
</p>
</div>
</div>
<div class="child">
<div class="card">
<img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
<p class="a-title">
Title
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
<a href="#">Some fake link</a>
</p>
</div>
</div>
<div class="child">
<div class="card">
<img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
<p class="a-title">
Title
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
<a href="#">Some fake link</a>
</p>
</div>
</div>
<div class="child">
<div class="card">
<img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
<p class="a-title">
Title
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
Some example text that I'm too lazy to ipsum right now.
</p>
<p>
<a href="#">Some fake link</a>
</p>
</div>
</div>
</div>
答案 1 :(得分：0)
宽度和高度不适用于flex，请使用“ flex”属性指定/设置元素的宽度。
我已经为“孩子”和“父母”类更新了您的CSS，以使所有卡片的高度相同。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="script" href="script.js">
<script src="script.js"></script>
</head>
<body>
<!-- The navigation menu -->
<ul class="topnav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle">
<div class="menu">
<li><a href="index.html">Home</a>
<li><a href="about.html">About Me</a></li>
<li><a href="portfolio.html" class="active">Portfolio</a></li>
<li><a href="contact.html">Contact Me</a></li>
</div>
</ul>
<!-- The start of everything else -->
<h1 style="text-align: center;height:40px;margin-top:30px;">
My Portfolio
</h1>
<div class="desc">
<p style="background-color: lightblue;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia elit nunc, non vulputate turpis tristique at. Suspendisse pellentesque dolor nec libero tincidunt dapibus. Nunc ut dolor tellus. Donec vitae leo sit amet nibh mattis accumsan. Sed eget
porta nulla. Suspendisse erat justo, ornare in enim at, pretium tempor nisl. Donec posuere, nisl vitae facilisis dictum, est lectus ultricies eros, a euismod neque dolor non odio. Proin mattis nisl erat, ut malesuada nisl suscipit at. Vestibulum
id sapien eros. Duis aliquet vulputate mi, id lobortis ligula lacinia sed. Sed pharetra nibh quis eros fringilla consequat. Phasellus facilisis leo ac dolor auctor lacinia. Nulla dignissim mi eu quam semper, vitae tristique diam porttitor. Duis
id tortor sit amet purus vestibulum ultricies. Suspendisse et fermentum felis. Mauris mauris diam, vestibulum ac ornare sit amet, facilisis sed tortor.
</p>
</div>
</p>
<div class="row">
<div class="responsivePortfolio">
<div class="gallery">
<a target="_blank" href="img/image21.jpg">
<img src="img/image21.jpg" width="600" height="400">
</a>
<div class="desc">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</div>
<div class="responsivePortfolio">
<div class="gallery">
<a target="_blank" href="img/image5.jpg">
<img src="img/image5.jpg" width="1000" height="200">
</a>
<div class="desc">
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions
from the 1914 translation by H. Rackham.
</div>
</div>
</div>
<div class="responsivePortfolio">
<div class="gallery">
<a target="_blank" href="img/maximumVariety.jpg">
<img src="img/maximumVariety.jpg" width="600" height="400">
</a>
<div class="desc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rutrum, ante sed ultrices porta, eros urna mollis tellus, et mattis elit lectus at neque. Curabitur placerat magna et odio bibendum, in tincidunt purus venenatis. Donec nunc diam, cursus sit
amet commodo ac, suscipit id mi. Nunc imperdiet ex erat, a faucibus est vestibulum in. Nunc consequat erat eget justo egestas, at elementum ante elementum. Nam quis tempor mauris. Phasellus rhoncus libero at condimentum aliquet. Mauris.
</div>
</div>
</div>
<div class="responsivePortfolio">
<div class="gallery">
<a target="_blank" href="img/image4.jpg">
<img src="img/image4.jpg" width="600" height="400">
</a>
<div class="desc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rutrum, ante sed ultrices porta, eros urna mollis tellus, et mattis elit lectus at neque. Curabitur placerat magna et odio bibendum, in tincidunt purus venenatis. Donec nunc diam, cursus sit
amet commodo ac, suscipit id mi. Nunc imperdiet ex erat, a faucibus est vestibulum in. Nunc consequat erat eget justo egestas, at elementum ante elementum. Nam quis tempor mauris. Phasellus rhoncus libero at condimentum aliquet. Mauris.
</div>
</div>
</div>
</div>
<div class="row">
<div class="nextPreviousButtons">
<a href="about.html" class="previous round">‹</a>
<a href="contact.html" class="next round">›</a>
</div>
</div>
</body>
</html>.parent {
display: flex;
flex-grow: 1;
flex-wrap: wrap;
}
.child {
margin: 1%;
display: flex;
align-items: stretch;
}
.a-title {
font-size: 1.3em;
font-weight: 700;
width: 100%;
}
.child .card {
border-radius: 3px;
border: 1px solid;
font-size: .8em;
padding: 10px;
display: inline-block;
overflow: hidden;
/* height: 600px; */
}