扫一扫浏览

父元素flex之后,子元素高度自适应问题

未结贴
0 132
大钱端未认证 2018-09-15 14:57:08
收藏

在我们做排版时候,特别是在做手机端自适应的情况,例如有3张图片,各分等比例排在一行,代码如下:


<div class="img">

   <img src="images/1.jpg"/>

   <img src="images/1.jpg"/>

   <img src="images/1.jpg"/>

</div>


当然你的CSS有其它写法可以达到平分的功能,我这里指的是父元素设置flex的情况,CSS代码如下


.img{

  width:100%;

  display:-webkit-box;

  display:-webkit-flex;

  display:-ms-flexbox;

  display:flex;

  -webkit-box-pack:justify;

  -webkit-justify-content:space-between;

  -ms-flex-pack:justify;

   justify-content:space-between;

}


.img img{

  width:33%;

  height:auto;

}


这种版本的情况,如果你的宽度变化的情况,图片的宽度会跟着变化,但高度的auto你会发现不起作用


OK这种情况你可只须要多添加一个align-self:flex-start;即可



.img img{

  width:33%;

  height:auto;

  align-self: flex-start;

}


当然你也可以给img各嵌套容器来实现


tpframe原创文章,转载请注明出处


最近热帖 HOT TOPIC
TPFrame框架简介 1242
【全套视频】thinkphp5视频教程 1089
TPFrame安装说明 1065
TPFrame目录结构 949
tpframe之添加数据 902
tpframe基类介绍 899
TPFrame源码获取 830
TPFrame用户协议 767
TPFrame开发规范 767
TPFrame数据字典 740
月度热议HOT COMMENTS
tpframe 后续版本你希望有的功能是什么(分享贴) 9
关于tpframe的一点话题 6
cms插件在分类排序的时候JSON错误 6
为了框架的良性发展,tpframe招募成员了 4
新增的管理员没有权限操作CMS模块。 3
thinkphp5自动完成操作,两次运行的详解 2
tpframe-curd操作之添加数据 2
tpframe能带给你的,让你快速搞定各服务端(api,pc,mobile,wechat)代码的框架 2
slide模块发布 2
透析thinkphp5升级版开发框架tpframe 2
爆料早知道:TPFrame v3.1已经发布,赶快下载体验吧!我有好想法