flex-grow, flex-basis, flex-shrink

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

在这个 flex 容器里面有几个项目,现在它们的宽度就是这些项目里的内容的宽度 .. 如果你想利用一下容器剩下的这些水平位置上的空间 .. 可以设置一下项目的 flex-grow 这个属性 ..

在 .item 上面,添加一个 flex-grow .. 这个属性默认的值是 0 .. 这里我们把它设置成 1 .. 这样所有的项目的 flex-grow 这个属性的值都会是数字 1 ,所以现在它们的宽度是一样的 ..

现在我想让某个项目的宽度大一些 .. 可以单独去设置一下这个项目的 flex-grow 属性的值 .. 比如设置一下 .item-3 这个项目 ..

添加一个 flex-grow .. 设置成数字 3 .. 你会看到这个项目的宽度会比其它的项目大一些 .. 这个数字越大,它的宽度也就越大 .. 也就是相对于其它的项目这个项目占用的额外的空间就越大。

flex-basis 可以设置一下 flex 项目的初始宽度 .. 先去掉在项目上应用的这个 flex-grow .. 默认这个 flex-basis 的值是 auto ..

在所有的项目上添加一个 flex-basis .. 比如设置成 100px .. 现在所有项目初始化的宽度就是 100 像素 ..

flex-shrink 控制的是项目的缩小数 .. 默认它的值是 1 .. 调整一下页面的宽度 .. 到一定程度的时候,你会发现项目的宽度都会缩小 ..

如果你不想让某个项目缩小它的宽度 .. 在这个项目的上面 .. 用一个 flex-shrink .. 把它的值设置成 0 .. 再调整一下页面的宽度 .. 现在除了 item-3 这个项目,其它的项目都会缩小 ..

现在如果你想让 item-3 更容易比其它的项目缩小宽度 . .. 可以把 flex-shrink 的值设置成一个比 1 大的正数 .. 比如这里我们设置成 3 ..

调整页面的宽度 .. 现在你会看到, item 3 这个项目比其它的项目都会窄一些 ..

设置 flex 项目的 flex-grow,flex-shrink 还有 flex-basis 有一个更简单的方法,就是使用 flex 这个属性 ... 你可以分别指定一下项目的 flex-grow,flex-shrink,还有 flex-basis 的值 .. 这也是 w3c 推荐使用的方法 ..

在所有的项目上面,添加一个 flex 属性 .. 它的值默认是 0 1 auto .. 第一个 0 是 flex-grow 的值,第二个 1 是 flex-shrink 的值,最后的 auto 是 flex-basis 的值 ..

flex-grow, flex-basis, flex-shrink《 CSS:Flexbox 布局 》

统计

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

社会化网络

关于

微信订阅号

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