flex 布局问题
http://blog.csdn.net/oudoni/article/details/64442741
用weui做微网站陷入了flex布局的坑。
flex与text-overflow配合效果一直都不是很理想。查阅了不少资料都无法解决问题（基本上能搜到的资料都是2层结构的，即flex容器与flex项两层，而自己的项目里面是有多层结构的，所以一直搭配不良）。
最后，多次尝试后终于解决问题。
即除了text-overflow，white-space，overflow之外需要在flex项（就flex:1那一些容器）里面设置宽度！
重点：宽度要足够小！这点网上压根就没有人说
flex有不错的自适应性，设置较小的宽度一般不会对布局造成影响
例子：
Title
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
}
.homepage{
display: flex;
flex-flow: column;
height: 100%;
}
.top{
background: black;
height: 30px;
}
.main{
flex: 1 0 auto;
display: flex;
flex-flow: row;
background: pink;
padding: 10px;
}
#nav{
background: blue;
width: 180px;
display: inline-block;
flex:0 0 auto;
}
.content{
background: red;
display: inline-block;
flex: 1 1 auto;
word-wrap:break-word;
width: 10px;
}
p{
word-wrap:break-word;
}
111
ww
11
111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
11
11
11
11
11
11
11
11
11
11
11
11
放大|缩小
效果：