关于html5弹性布局(2)

在前面的一篇文章中，我很简单介绍了弹性布局的概念，这里我将介绍弹性布局的实例化。理解弹性布局，并不是那么简单，因为弹性布局的基础和思想，和我们传统的盒装模式不同，所以必须要深入接受这种弹性布局的思路。接受这种思维的要点是动态布局。那么什么是动态布局呢。这里我举一个例子，传统的盒装模式，我们编写的UI适配到pc-web但是能够适配到移动设备吗？这是不能够的，如果我们需要适配到移动设备，必须要编写额外的UI去主动适配，所以才有了web-pc和移动设备展现效果的不同。即使所有的UI仅仅某些布局或者div进行了适配和编写，那也是多写了一部分内容。弹性布局的意义在于，我们设计的UI是主动适配到各个设备的，这种适配是主动的放大或者缩小到所有的设备，换句话说，我们的UI的元素的相对位置一直不变化，变化的仅仅是单位值rem。这样得到的负面效果是：可能并不能很友好的适配到pc-web，因为pc-web变形比较厉害。这个时候的问题，我们就可以使用《关于html5的屏幕适配方案1》中介绍的第二点了。但是到了其他的设备，基本上可以比较友好的展现，所以效果可以接受。

动态是弹性布局的内核思维。理解动态，理解相对，那么就理解了弹性布局。基本上，我们编写一套UI就可以适配到所有的设备，这是动态布局带来的优势。当然本文我仅仅会介绍非常简单的例子，事实上理解这些简单的例子，对于我们入门者或者想要深入学习的人而言，也是一笔财富：可以有效理解和直接应用。

第一点，我们作一个简单的尝试。我们看看flex的默认布局。前文已经讲说，默认模式首行左对齐！也即使最上行左对齐。现给出部分代码。

        

其展现的效果如下:

效果的确是如上文所说的上行左对齐。

我们再看看居中的情况

实现的代码如下:

        

也许你要问的是，我们需要控制的是子元素或者子容器，为什么不直接控制子元素。我们是不是在前文一再说明过:弹性布局的概念，已经不再说去主动控制某个子元素了，为了适配所有的设备的size，所以这种适配需要实现的效果是从宏观上去控制统一，这样才是弹性布局的最主要思想。所以你一再试图做出的方案，如果你的设置并不是布局观念的，那么你需要做的可能是如下的思路:

主布局主要是上行左对齐，但是到了某子元素，你想实现居中对齐！这是可以的行为。现实现如下:  

        

效果图如下:

看到两处，我们可以发觉，在设置的两处中，第一种手法是全局居中，第二种手法则是全局上行左对齐。不过最后实现的方式相同了。这里分作两部分编写的缘故就是，如果在某个项目中，我们必须设置上行左对齐，但是又需要某些效果居中对齐，所以我们可以使用这种手法实现了。唯一需要做的工作是：要计算数值。我们的子容器已经设置了绝对位置，所以这个绝对位置的left或者right是要有数值的。这里有读者可能会问到，设置了绝对的值，那么其他的平台还是相同效果，如果细心的读者会发现单位是rem而不是px，这就是利用了不同设备的rem值不同，这个rem值是经过计算的，所以不同的平台或者设备rem不同，在相同的数值的情况下，绝对的位置相对于各个设备而言都是相同的。这就是rem的功劳。

另外又有人会问到，绝对位置我们是怎么计算的呢。这里我给出一个简单的思路，假定你的子容器的高度和高度一致，那么这里的top就不需要了，left的数值需要计算，这个情况下，先定义父容器宽度100%，子容器宽度20%，那么left的计算数值为:

Val = (100%-20%)*10/2 = 4 单位rem。

又例如子容器高度和父容器高度不一致，那么这个时候的top或者bottom计算如下:

   Val_H=( BaseH-CH)*10/2单位rem;由于我们设定了子容器的绝对位置，所以上一级的容器的高度和子容器的高度不适合使用百分比了，我们可以直接设置rem数量，令上一级容器的height:1rem,子容器的height:0.3rem,那么子容器的top数值计算为:

   Val_H= (1rem-0.3rem)/2 = 0.35rem

效果如下:

编写UI代码如下: