css3移动经典布局

CSS3移动经典布局是一个常用的移动设备布局方案，通过使用CSS3的新特性，可以让布局更加灵活和适应不同尺寸的移动设备。

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.item {
  flex-basis: calc(50% - 10px);
  margin-bottom: 20px;
}

@media screen and (min-width: 640px) {
  .container {
    justify-content: space-around;
  }
}

@media screen and (min-width: 960px) {
  .item {
    flex-basis: calc(33.33% - 10px);
  }
}

以上的代码是一个典型的CSS3移动经典布局，其中.container为整个布局容器的类名，通过设置display: flex来启动flexBox布局模式。flex-flow属性用来设置flex容器的主轴方向和换行设置，row wrap表示主轴方向为行，当空间不足时自动换行。justify-content属性用来设置主轴上的对齐方式和间距长度，space-between表示两端对齐，项目之间的间距相等，而且第一个和最后一个项目分别相邻于容器的两端。

接下来，.item为每个单独项目的类名，flex-basis属性用来设置项目的初始大小，calc()函数可以用来计算长度值，此处为计算50%宽度减去10px的空隙。margin-bottom属性用来设置项目之间的下边距，这里设置为20px。在@media媒体查询中，可以根据屏幕宽度做出相应的响应式布局，例如当屏幕宽度大于等于640px时，justify-content属性改为space-around表示上下左右对称对齐。当屏幕宽度大于等于960px时，flex-basis属性改为calc(33.33% - 10px)表示每个项目宽度为容器宽度的三分之一。

在移动设备上实现灵活的布局显得尤为重要，CSS3移动经典布局通过使用flexBox和媒体查询技术实现，可以帮助我们更好的适应不同尺寸的移动设备，提供更好的用户体验。