怎么制作使用flex制作可自适应的web页面？？
想使用flex制作这种可自适应的布局（用在手机页面）：
我仿照着写了，效果如下：
对应的代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<style>
body,div{margin:auto;padding:0px;position:relative;}
.wfr_con{border:5px solid red;max-width:640px;width:100%;min-height:100px;max-height:300px;margin-top:20px;display:flex;display:-webkit-flex;justify-content:flex-start;-webkit-justify-content:flex-start;flex-flow:row wrap;-webkit-flex-flow:row wrap;align-items:stretch;-webkit-align-items:stretch;box-sizing:border-box;zoom:1;}
.wfr_con>div{margin:0px;width:0px;height:100%;flex:1 1 auto;-webkit-flex:1 1 auto;}
.wfr_left{}
.wfr_left a{width:100%;height:100%;display:inline-block;}
.wfr_left a img{width:100%;height:100%;}
.flex_two{border:3px solid green;height:100%;display:flex;flex-flow:column wrap !important;-webkit-flex-flow:column wrap !important;justify-content:flex-start;-webkit-justify-content:flex-start;align-items:stretch;-webkit-align-items:stretch;}
.flex_two a{width:100%;height:50%;flex:1 1 auto;}
.flex_two a img{width:100%;height:100%;}
</style>
<div class='wfr_con'>
<div class='wfr_left'>
<a href='javascript:void(0);'><img src='http://img1.gamersky.com/image2016/05/20160526_ll_136_6/gamersky_03small_06_20165261143C4D.jpg' /></a>
</div>
<div class='wfr_right'>
<div class='flex_two'>
<a href='javascript:void(0);'><img src='http://img1.gamersky.com/image2016/05/20160526_ll_136_6/gamersky_01small_02_20165261143DDB.jpg' /></a>
<a href='javascript:void(0);'><img src='http://img1.gamersky.com/image2016/05/20160526_ll_136_6/gamersky_02small_04_20165261143563.jpg' /></a>
</div>
</div>
</div>
</body>
</html>
重点出现这种现象的原因，我没有在最外层容器元素上设置固定的高度(使用的是：min-height,max-height)，才导致出现这种现象。
我想要知道为什么设置min-height,max-height 后，子元素为什么就无法继承父元素的高度了呢？？
然后就是，怎么解决这个问题，实现我想要的效果（第一张图显示的布局）？？
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
第一：少了meta标签
第二 在移动端需
才能自适应屏幕
第三： flex的用法不对 传送门