flex布局实现左边图片与右边文字同等高

最新推荐文章于 2024-08-03 16:03:00 发布

nuanyue123

最新推荐文章于 2024-08-03 16:03:00 发布

阅读量3.7k

点赞数 1

分类专栏： css flex 文章标签： flex

本文链接：https://blog.csdn.net/qq_42551474/article/details/108776407

版权

在页面布局中，解决左边图片与右边文字自适应但不同等高的问题可以借助flex布局。通过设置`align-self: stretch;`，可以使弹性项根据容器高度拉伸，同时考虑了min-height/min-width/max-height/max-width属性的限制。

摘要由CSDN通过智能技术生成

问题：一般页面布局的时候我们遇到很多需要左边图片与右边文字自适应但是不同等高的情况，很头疼，其实用flex布局一句话就能搞定了
align-self: stretch;:该弹性项被拉伸以适应容器高度，其所使用的值是使项目的外边框（margin box）的垂直尺寸尽可能接近和行相同的尺寸，并依然遵循min-height/min-width/max-height/max-width属性的限制。
代码

//html
 <div class="new_item">
            <img src="https://i1.mifile.cn/a4/xmad_15535933141925_ulkYv.jpg" />
            <div class="news_item_info">
              <span class="title_2 titleHove">新店首月狂销200万，裂变3万人社群，平地起飞究竟为何？</span>
              <div class="txt">
                <span>社群</span>
                <span>蛋糕烘焙</span>
                <span>满减送</span>
                <span>积分商城</span>
              </div>
            </div>
          </div>

//css
.new_item {
        height: 100%;
        img {
          width: 15%;