标签：
昨天由于一些特殊情况，没能来得及写一份工作总结，今天补上。
昨天是入职的第三天，主要的任务是编写订单管理静态页面。主要的难点在于实现具有单元格合并的表格。因为是表格，一开始想到的就是使用table布局来实现，毕竟table布局的自带属性可以让多行文字自动垂直居中，单元格可以根据页面大小和内容进行相应伸缩。但是做到单元格合并的时候却不知道怎么做了。自己到网上查了一下还是不能解决，于是换了一种方式，决定使用flex布局来实现。Flex可以让子元素的长度根据父元素大小按照设定的比例进行相应的伸缩，而且所有子元素的高度是自动等高的，刚好满足单元格合并的功能要求。
通过使用flex布局，单元格的合并功能实现了，但是随之带来了一个新的问题，就是在felx布局中，子元素的文本没有垂直居中。如果使用要line-height使文本居中，那么首先得知道元素的高度，而且文本只能有一行才行。但是我这个元素高度是未知的，文本是多行的，所以line-height行不通。那么使用display:table-cell + vertical-align:middle来实现如何？试了一下还是不行，网上查了一下，在使用flex布局的情况下，vertical-align是无效的。怎么办呢？只能求救师兄了，师兄说他写过一个类似的，用的是box布局，不过它俩都差不多，flex应该也会有方法的，还有其实table布局是有合并单元格的属性，要我再去看看。
后来在w3cplus大漠老师的一篇博客中看到了flex布局文本垂直居中的解决方案，那就是在子元素中再次使用flex布局，让文本变为子元素的一个匿名伸缩项目，再使用align-items:center就可以使得文本居中了。后来也找到了table布局合并单元格的方法，那就是使用colspan和rowspan属性。
昨天也就基本上做了这些事情，关于flex布局和table布局还得多加练习，既然遇到了就趁此机会好好把它们吸收掉，加油。
标签：
原文地址：http://www.cnblogs.com/weixiao-he/p/5652000.html
