Question

容器div是显示flex，但是两个子div不响应flex grow属性。这种方法对于ul中的li来说似乎没问题，我做错了什么？

＆＃13;

.container {
  display: flex;
}

.container .featured {
  background: pink;
  flex-grow: 1;
}

.container .loaded {
  background: lightblue;
  flex-grow: 3;
}

＆＃13;

<div class="container">
  <div class="featured">
    <h2>Featured Article</h2>
    <p>Lorem Ipsum ihsjrtop fdiubhreg urfhga ergujdfhjbsd fmbn szlriuv vfduvbhl;er vkl.ifhb;oabe rvkdbfvjsh fvnz dfbvzlh g;oiuhv za,rujhvblzubjavznbmsdf v vjlzUBvmzBSv blizU vzUIJBVl;djhb mzcn dvz,bdfrvmzn dcv,zubdfvmn zfv,uzjbdfkbvjnv.zbin.d,vjbnkd bvnzfbzdj
      v,jzdfuvblkjdfg ,fdjknb;oizdf b.kfzdnbizd fvbkjzfdb vf</p>
  </div>
  <div class="loaded">
    <h1>Home Page</h1>
  </div>
</div>

＆＃13;

Answer 1

如果您使用flex:代替flex-grow:

，这将有效

有关详细信息，请最好阅读此link

注意： flex是flex-grow，flex-shrink和flex-basis组合的简写。第二个和第三个参数（flex-shrink和flex-basis）是可选的。

在这里我用过：

flex: 1; = flex-grow: 1;flex-shrink: 1;flex-basis: 0%;

flex: 3; = flex-grow: 3;flex-shrink: 1;flex-basis: 0%;

＆＃13;

.container {
  display: flex;
}

.container .featured {
  background: pink;
  flex: 1;
}

.container .loaded {
  background: lightblue;
  flex: 3;
}

＆＃13;

<div class="container">
  <div class="featured">
    <h2>Featured Article</h2>
    <p>Lorem Ipsum ihsjrtop fdiubhreg urfhga ergujdfhjbsd fmbn szlriuv vfduvbhl;er vkl.ifhb;oabe rvkdbfvjsh fvnz dfbvzlh g;oiuhv za,rujhvblzubjavznbmsdf v vjlzUBvmzBSv blizU vzUIJBVl;djhb mzcn dvz,bdfrvmzn dcv,zubdfvmn zfv,uzjbdfkbvjnv.zbin.d,vjbnkd bvnzfbzdj
      v,jzdfuvblkjdfg ,fdjknb;oizdf b.kfzdnbizd fvbkjzfdb vf</p>
  </div>
  <div class="loaded">
    <h1>Home Page</h1>
  </div>
</div>

＆＃13;

希望这对你有所帮助。

为什么flex-grow属性没有改变什么？

1 个答案: