flex布局

基本操作可参考阮一峰的文章

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

以下记录几个比较常用的功能

父元素设置为display：flex则为弹性布局，webkit需要加前缀-webkit-flex

子元素设置flex属性，若两个div分别设置flex：1；flex：2；则一个占据剩余空间1/3，一个占2/3.

flex是flex-grow, flex-shrink 和 flex-basis三个属性的简写。

各个子元素垂直居中：align-items：center；

两个元素左右对齐：justify-content：space-between;

若某个子元素不设置flex属性，则其占默认所需宽度，另外设了flex属性的按比例分剩余的宽度。

解决设了flex属性的子元素，里面内容超出最大宽度的问题。

例如两个div，div1没设flex，div2设了flex，则div2默认占了剩余的所有宽度，有时候div2里面的文字超出其宽度的时候应展示 ...,但是这时候宽度会被撑开，超出其所剩余的所有宽度，这时候可以给div2设置width：0；则可解决这个问题。然后给div2里的文本元素设置white-space: nowrap;overflow: hidden; text-overflow: ellipsis;即可实现单行超出展示省略号。参考的文章是 http://blog.csdn.net/zgh0711/article/details/78270555