在使用flex布局時，若出現換行，有兩種較為特殊的現象是值得我們研究的：
子元素高度被拉伸，其實際高度大於它的內容高度。各行子元素之間的行間距過大，甚至我們根本沒有給子元素設置margin。
現在我們將要探究引發這兩種現象的原因及解決方案。
一、子元素高度拉伸問題
- 原因：沒有明確聲明子元素的高度。
- 現象：
子元素高度沒有明確聲明時，若容器有縱向空余高度，各行子元素將均分空余高度。 - 解決方案：
明確聲明各子元素的高度。 - 特別說明：不換行也會均分，與行數無關。
- 案例：（可直接運行）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style> .container { margin: 0 auto; display: flex; flex-wrap: wrap; height: 600px; width: 800px; border: 1px solid red; } .item{ margin-right: 20px; margin-bottom: 20px; width: 200px; background-color: green; } .item-content{ height: 200px; } </style>
</head>
<body>
<div class="container">
<div class="item">
<div class="item-content"></div>
</div>
<div class="item">
<div class="item-content"></div>
</div>
<div class="item">
<div class="item-content"></div>
</div>
<div class="item">
<div class="item-content"></div>
</div>
<div class="item">
<div class="item-content"></div>
</div>
<div class="item">
<div class="item-content"></div>
</div>
</div>
</body>
</html>
在以上案例中，每個.item元素的內容高度由.item-content撐起來，為200px，實際高度卻為280px。這是由於我們沒有顯式聲明.item元素的高度，采用flex多行布局並且容器有空余，那么各行子元素將均分容器的剩余高度，可采用給.item設置height為200px來解決該問題。
二、行間距異常問題
- 原因：沒有明確聲明各行元素的縱向排列方式。
- 現象：
默認情況下，若容器有縱向空余高度，且子元素高度已顯示聲明，那么各行將出現額外行間距，且每兩行的行間距相等。 - 解決方案：
設置align-content屬性。 - 特別說明：不換行也會均分，與行數無關。
- 案例：（可直接運行）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style> .container { margin: 0 auto; display: flex; flex-wrap: wrap; /* align-content: flex-start; */ height: 600px; width: 800px; border: 1px solid red; } .item{ margin-right: 20px; margin-bottom: 20px; height: 200px; width: 200px; background-color: green; } .item-content{ height: 200px; } </style>
</head>
<body>
<div class="container">
<div class="item">
<div class="item-content"></div>
</div>
<div class="item">
<div class="item-content"></div>
</div>
<div class="item">
<div class="item-content"></div>
</div>
<div class="item">
<div class="item-content"></div>
</div>
<div class="item">
<div class="item-content"></div>
</div>
<div class="item">
<div class="item-content"></div>
</div>
</div>
</body>
</html>
在以上案例中，我們希望各行的行間距是我們設置的margin-bottom的值20px，那么我們只需給容器設置align-content: flex-start；即可。這將使得各行緊密排列，剩余空間都到了容器的底部。更多的排列方式可查閱align-content文檔。