上一章，我们讲到移动端的viewport方法，主要是适配不同的屏幕的像素密度的手机设备。为了让我们的前端的UI设计的页面完全展示出来，来进行webapp的页面设计。viewport方法有很多属性，比如说，width=device-width,maximum-scale=10,initial-scale=1,minimum-scale=1,user-scale=no  我们在移动端的设配就是一般的写法，能适配不同的手机屏幕的像素密度的。这样，我们的html和css架构就不会失真。这是移动端的适配。当然，我们还有响应式布局，为了让客户体验更好的效果，让页面的结构能适应不同的屏幕宽度呈现不同的页面样式。主要的语法是@media screen and（max-width）{} 在小括号内，是我们的判断的屏幕的宽度呈现的不同的css样式。在大括号的内，我们写以元素的选择器来进行设置css样式。当然，我们如果写多个css样式，可以用link标签来进行导入。写不同的css样式表，来设置不同的css样式适应不同的屏幕的宽度。写法如下：<link  rel="stylesheet"  type="text/css" href ="link.css" meta =" only screen and(max-width:300px)" 

我们来讲一下的是移动端的flex布局。

如果，我们为移动端定制一套的html架构的话，我们是首选的是flex布局手段。也是将来的布局的发展趋势。

flex是弹性布局方式。是关注的页面的元素的分配空间和对齐方式，是以缩放的比例来进行布局的，正好可以适应不同的屏幕大小来进行适配。具体的布局方式：

在父集的盒子上，我们通过改变类型：display:flex来进行弹性布局。其实，flex布局的基本原理是父集的弹性flex来控制子集项目，而在盒模型是在各自的元素进行控制。

布局的核心的是以主轴来进行布局，也就是说，项目的布局和占位是以主轴的方向来进行布局的，所以，我们首先是要按照主轴的方向来进行布局，就是用flex-direction=row/colum/reverse 来进行控制主轴的方向，也是相对应的控制交叉轴的方向。在不换行的情况下，是单根主轴的情况下，换行的属性是（flex-wrap:wrap）来设置换行的。在换行情况下，是多根主轴和交叉轴。我们在设置多根主轴和交叉轴时，我们用align-content:center/bottom/between来进行设置多根主轴和交叉轴的情况下，我们用align-content的属性来控制交叉轴的对齐方向。（注意：我们有改变主轴的方向，没有改变交叉轴的方向的属性。因为我们改变了主轴的方向（注意：交叉轴的方向是随着主轴的方向而改变的。所以，我们也不用设置交叉轴的方向了），也就间接的改变交叉轴的方向了。但是我们有改变的交叉轴的对齐方式的属性。（注意：我们要根据主轴和交叉轴的数量来进行设置或者使用align-content或者是align-items）） 

 在主轴和交叉轴的对齐方式上，我们要经常用到这两个属性：space-between或者是space-around .space-between是在两端对齐。通过父集来控制项目两端对齐。是项目之间的间隔相等。space-around:是可以控制的项目的之间的间隔相等。项目之间的间隔比项目与边框的间隔大一倍。因为这是每个项目的间隔是相等的，中间的间隔是两个项目的间隔之和。所以，是2倍的间隔。

我们在移动端的布局时，要分析结构，是否要用弹性盒模型布局。如果是上下结构，我们要改变主轴的方向，要分析项目之间的间隔是否要用到space-between或者space-around的属性。要注意的是，如果用到弹性盒模型布局的时候，浮动（float）,clear,verict-align将会失效。如果，在不设置高度的时候，默认值stretch的属性会把整个空间充满，也就是顶天立地，那么，我们会用到项目的一些属性。前面，我们讲到的是容器的属性。

dispaly:flex;

flex-wrap:wrap;

justify-content:center/flex-end/flex-start/ space-around/space-between/

align-items/align-around/stretch 

这些属性是我们的容器属性，经常用到的。也是写在容器的属性来控制子集的属性。

昨天，在做项目的时候，我们用