贸易公司网站设计,wordpress 上帝模式,网络舆情监测存在的问题,网页设计与制作课程思政教学设计目录 问题flex布局示例解决办法方式一方式二 参考 问题
css中使用flex布局中子元素高度height没有达到100%
flex布局示例
希望实现两个盒子左右分布#xff0c;内容垂直居中对齐
style.box {display: flex;align-items: center;border: 1px solid #eeeeee;}.box-l… 目录 问题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;}
/stylediv classboxdiv classbox-left《绝句》唐杜甫/divdiv classbox-rightdiv classbox-right__item两个黄鹂鸣翠柳一行白鹭上青天。/divdiv classbox-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;}处理结果
参考
flex弹性布局 子元素高度不撑满父元素高度问题flex 子元素撑满父元素高度
