扫一扫浏览

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

未结贴
0 553
大钱端未认证 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
【全套视频】thinkphp5视频教程 1250
thinkphp5隐藏默认模块的一些问题 1114
TPFrame框架robot模块重磅来袭,内附2.1版本 1063
教你如果处理高并发数据不同步的问题php篇 1055
tpframe安装教程 1051
tpframe新建主题 995
slide模块发布 994
tpframe应用目录结构 988
thinkphp5自动完成操作,两次运行的详解 975
TPFrame 2.1 beta版本正式发布,全部插件式开发到来 929
月度热议HOT COMMENTS
tpframe 后续版本你希望有的功能是什么(分享贴) 12
关于tpframe的一点话题 6
cms插件在分类排序的时候JSON错误 6
新增的管理员没有权限操作CMS模块。 3
thinkphp5自动完成操作,两次运行的详解 2
tpframe-curd操作之添加数据 2
tpframe能带给你的,让你快速搞定各服务端(api,pc,mobile,wechat)代码的框架 2
slide模块发布 2
透析thinkphp5升级版开发框架tpframe 2
tpframe v2.2自动生成文档easydoc插件已发布 2
爆料早知道:又拍云存储插件上线我有好想法