flex 布局中父元素高度对子元素布局的影响及解决方案
本文探讨 Flex 布局中父元素高度如何影响子元素布局，以及如何解决布局方向改变后出现的问题。
父元素高度对 Flex 布局方向的影响
在 Flex 布局中，父元素的高度设置会影响子元素的布局，尤其是在改变布局方向（flex-direction）时。
例如，一个父元素设置了高度，包含两个子元素，一个高度固定，另一个高度自适应。当 flex-direction 为 row 时，子元素水平排列，效果正常。但当 flex-direction 变为 column 时，高度固定的子元素可能会占据整个父元素的高度，导致另一个子元素高度被压缩。
问题示例及解决方案
以下是一个问题示例：
<code class="css">.parent {
display: flex;
width: 500px;
height: 500px;
flex-direction: row; /* 初始为行布局 */
background: #fff;
}
.left {
flex: 1 0 auto;
height: 100px;
background: blue;
}
.right {
flex: 1 1;
background: red;
}</code>
当 flex-direction 为 row 时，两个子元素水平排列，蓝色块高度为 100px。但当改为 column 时，蓝色块会撑满父元素高度 (500px)，红色块高度被压缩。
为了解决这个问题，可以修改 .left 元素的样式：
<code class="css">.left {
flex: 0 0 50%; /* 占据父元素宽度的一半 */
max-height: 100px; /* 最大高度限制为 100px */
background: blue;
}</code>
通过设置 flex: 0 0 50%，我们指定 .left 元素占据父元素宽度的一半，并限制其高度不超过 100px。这样，无论 flex-direction 如何变化，蓝色块的高度都保持在 100px 以内，避免了布局错乱。
通过以上方法，我们可以有效控制 Flex 布局中父元素高度对子元素布局的影响，确保在不同布局方向下都能获得预期的效果。
