用户登录

在 flex 容器排完了 flex 项目以后,还剩下一些空间,我们可以把这些空间分配给 flex 项目使用。在这个 1 号盒子上面添加 tailwind 提供的 flex-grow。 这个类会把 flex-grow 设置成 1。 这样会把 flex 容器剩下的所有的空间全部分配给 1 号盒子。

在 2 号盒子上面再添加一个 flex-grow,这样容器剩下的空间会平均分配给 1 号还有 2 号盒子。因为 1 号 2 号盒子的 flex-grow 属性都是 1 ,所以容器剩下的空间会分成两份,1 号盒子占用一份,2 号盒子也占用一份。

在 3 号盒子上面,再添加一个 flex-grow,这样会把剩余空间分成 3 份,每个项目占用其中的一份,因为它们的 flex-grow 属性的值都是 1。

shrink

现在我们在 2 号盒子里面,添加点内容。在浏览器,调整一下窗口的宽度,观察这几个项目的宽度的变化,它们会随着容器宽度的变化调整自己的宽度。 缩小宽度的时候,这些项目的宽度也会随着缩小。

如果你不想收缩某个项目的尺寸,可以在元素上添加一个 flex-shrink-0,它会把 flex-shrink 这个属性的值设置成 0。

再试一下,调整浏览器窗口的尺寸。你会发现,2 号盒子这次就不会再收缩了。

项目增长与收缩:Grow,Shrink《 Tailwind 样式框架:柔性盒子 》

统计

13228
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点