该博客介绍了如何使用Flex布局来创建响应式设计。通过调整不同屏幕尺寸下的媒体查询，实现了在大屏设备上显示为两列，在小屏设备上显示为一列的布局效果。内容包括设置元素的margin、padding、flex属性，以及图片、标题和链接的样式。
*{margin: 0px;padding: 0px}
.wrap{width: 80%;margin: 0 auto;}
.wrap h1{margin: 30px 0px ;text-align: center;}
.item{display: flex;}
.item div{flex: 1;padding: 20px 30px;}
.item div img {width: 100%;height: auto;}
.item div h2{margin: 30px 0px ;}
.item div a {display: block;color: orange;text-decoration: none;margin: 20px 0px;}
@media all and (max-width:1000px){}
@media all and (max-width:992px){
.wrap{flex-flow: row wrap;}
.wrap .item {flex: 0 0 auto;width: 50%;}
}
@media all and (max-width:768px){
.wrap{flex-flow: column;}
.wrap .item {flex: 0 0 auto;width: 80%;margin: 20px auto;}
}
</style>
</head>
<body>
<div class="wrap">
<h1>Pprtfolio...</h1>
<div class="item">
<div>
<img src="../image/a.png">
<h2></h2>
<p>style="color:red;font-weight:600">
ef="http://developer.baidu.com/map/index.php?title=jspopular/guide/introduction" style="color:#2f83c7" target="_blank
="http://lbsyun.baidu.com/apiconsole/key?application=key</p>
<a href="#">apiconsole</a>
</div>
<div>
<img src="../image/b.png">
<h2></h2>
<p>style="color:red;font-weight:600">
ef="http://developer.baidu.com/map/index.php?title=jspopular/guide/introduction" style="color:#2f83c7" target="_blank
="http://lbsyun.baidu.com/apiconsole/key?application=key</p>
<a href="#">apiconsole</a>
</div>
<div>
<img src="../image/c.png">
<h2></h2>
<p>style="color:red;font-weight:600">
ef="http://developer.baidu.com/map/index.php?title=jspopular/guide/introduction" style="color:#2f83c7" target="_blank
="http://lbsyun.baidu.com/apiconsole/key?application=key</p>
<a href="#">apiconsole</a>
</div>
</div>
<div class="item">
<div>
<img src="../image/a.png">
<h2></h2>
<p>style="color:red;font-weight:600">
ef="http://developer.baidu.com/map/index.php?title=jspopular/guide/introduction" style="color:#2f83c7" target="_blank
="http://lbsyun.baidu.com/apiconsole/key?application=key</p>
<a href="#">apiconsole</a>
</div>
<div>
<img src="../image/b.png">
<h2></h2>
<p>style="color:red;font-weight:600">
ef="http://developer.baidu.com/map/index.php?title=jspopular/guide/introduction" style="color:#2f83c7" target="_blank
="http://lbsyun.baidu.com/apiconsole/key?application=key</p>
<a href="#">apiconsole</a>
</div>
<div>
<img src="../image/c.png">
<h2></h2>
<p>style="color:red;font-weight:600">
ef="http://developer.baidu.com/map/index.php?title=jspopular/guide/introduction" style="color:#2f83c7" target="_blank
="http://lbsyun.baidu.com/apiconsole/key?application=key</p>
<a href="#">apiconsole</a>
</div>
</div>
扫一扫
913
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
