关于响应式写法：大屏一行三列，小屏为一列三行

关于响应式写法：大屏一行三列，小屏为一列三行

简单适配，PC端或Ipad为:

小屏幕如移动端为：

首先随便写几个div

<div id="main">
  <div style="background-color:coral;">红色</div>
  <div style="background-color:lightblue;">蓝色</div>  
  <div style="background-color:lightgreen;">绿色 div</div>
</div>

css 才用flex布局

#main
//随便写点宽高样式
{
	width:220px;
	height:300px;
	border:1px solid black;
	display:flex;//设置为flex布局
}

#main div
{
	flex:1;//flex-grow、flex-shrink、flex-basis，具体请百度
}
//用媒体查询方式匹配当屏幕大小为宽度768px，会去适应下面样式。
//注意：宽度得写你要适配的宽度。也可以用min-width去适配，具体看自己需求
@media (max-width: 768px) {  
  #main {
    flex-direction: column;//row为横向 column为纵向
  }
}