电脑版显示为一行有四列.
手机版显示为一行两列
thinkphp 的 html

	<section class="nutshell"style=""><div class="grid"><div class="section-title center anim">{$typecont.enname}</div><div class="items anim"><volist name="about" id='v' key="k" ><div class="item anim"><a href="{$v.url}"><figure class="center"><img src="{$v.pic}" alt="" /></figure></a></div></volist></div></section>

css

.nutshell .items {display: flex;flex-wrap: wrap;justify-content: space-between;align-content: flex-start;margin: 100px 0 0 0;
}.nutshell .item {width: 280px;text-align: center;
}@media only screen and (max-width: 768px){
.nutshell .items {===flex-direction: column;/**这行注释掉,否则,手机上就是一行只显示一列了*/margin: 30px 0 0 0;
}.nutshell .item {width: 100%;flex-basis: 49%;margin: 15px 0 0 0}}