問題

css中使用flex布局中子元素高度height沒有達到100%

flex布局示例

希望實現兩個盒子左右分布，內容垂直居中對齊

<style>.box {display: flex;align-items: center;border: 1px solid #eeeeee;}.box-left {background-color: pink;}.box-right {background-color: skyblue;}
</style><div class="box"><div class="box-left">《絕句》唐杜甫</div><div class="box-right"><div class="box-right__item">兩個黃鸝鳴翠柳，一行白鷺上青天。</div><div class="box-right__item">窗含西嶺千秋雪，門泊東吳萬里船。</div></div>
</div>

可以看到，左邊的盒子高度并沒有撐滿

解決辦法

方式一

將父元素的樣式align-items: center 去除，單獨設置子元素的對齊樣式

 .box {display: flex;/* align-items: center; */border: 1px solid #eeeeee;}.box-left {background-color: pink;/* 增加如下樣式 */display: flex;align-items: center;}.box-right {background-color: skyblue;}

方式二

使用 align-self: stretch; 將子元素撐滿

.box {display: flex;align-items: center;border: 1px solid #eeeeee;}.box-left {background-color: pink;/* 子元素撐滿 */align-self: stretch;display: flex;align-items: center;}.box-right {background-color: skyblue;}

處理結果

參考

1. flex彈性布局 子元素高度不撐滿父元素高度問題
2. flex 子元素撐滿父元素高度