flex布layout中width:0;避免元素空间被挤没的原理

在Flex布局中，当一个元素的display属性设置为flex时，其后代元素将成为Flex子元素。如果子元素没有指定宽度，其宽度则为auto，即占据父元素剩余的空间。

在这个例子中，第一个子元素没有指定宽度，而第二个子元素指定了flex:1;，表示其将占据父元素剩余的所有空间。当第一个子元素指定宽度时，它会使用剩余空间中的一个部分，从而挤压第二个子元素。

为了避免这种情况，可以为第二个子元素指定宽度为0;。这将使该元素占据父元素剩余空间的一部分，而不会影响第一个子元素。

实用的图文表格ui布局

基于table, flex属性制作创意的用户个人简介图文表格列表ui布局特效。

下载

这是因为Flex布局遵循以下计算规则：

• 具有flex:1;的子元素将占用剩余空间中1的部分。
• 具有指定宽度的子元素将占据指定的空间。
• 具有auto宽度的子元素将占据剩余空间中剩下的部分。

因此，为第二个子元素指定宽度为0;将强制其只占据剩余空间，而不会影响第一个子元素。