css：flex布局中子元素高度height没有达到100%

css：flex布局中子元素高度height没有达到100%

目录

• • 问题
  • flex布局示例
  • 解决办法
  • • 方式一
    • 方式二
  • 参考

问题

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 子元素撑满父元素高度