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

放大|缩小

function scale() { document.getElementById("nav").style.width="70px"; }

效果：