移动端flexbox的小tips

我也是看了腾讯isux的博客,解答了我关于flexbox一个很长时间的疑惑,就是flex布局在安卓手机会出现内容长短不一样致使不均分的现象。html

具体的内容能够去看腾讯isux的博客,地址在这:https://isux.tencent.com/flexbox.htmlweb

我这里也只是看成一个问题的纪录布局

其实要解决这个问题很简单,给子元素加一个width: 0%;的属性就能够了,同时要注意不要加margin: auto;flex

.father{
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

.child{
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  width: 0%; /* 解决部分安卓设备上内容长短不一样致使不均分的现象 */
}
相关文章
相关标签/搜索