CSS3 灵活的盒子模型(Flexible Box Module)-2

概述继上一篇《CSS3 灵活的盒子模型(Flexible Box Module)-1》后继续深入，说说 CSS3 里盒子模型的尺寸。本文的 HTML 框架继续沿用《CSS3 灵活的盒子模型(Flexible Box Module)-1》。在 CSS2 里，要把一个容器分成三栏的话比较简便的方法是把三个字容器的 width 都设为 33.3%，这种方法无法把父容器的… @H_502_0@

继上一篇《CSS3 灵活的盒子模型(Flexible Box Module)-1》后继续深入，说说 CSS3 里盒子模型的尺寸。本文的 HTML 框架继续沿用《CSS3 灵活的盒子模型(Flexible Box Module)-1》。

在 CSS2 里，要把一个容器分成三栏的话比较简便的方法是把三个字容器的 wIDth 都设为 33.3%，这种方法无法把父容器的宽度完全填充，在父容器的宽度足够大的时候留下的空白会是页面变得很不美观。令一种方法是通过计算把子容器的 wIDth 都设为一个固定值，这种方法比较繁琐，而且在一些情况下无法使子容器的宽度完全相等（例如父容器的宽度为 100px）。当我们迈入 CSS3 时代后，这种问题将迎刃而解。

Box-flex 属性

Box-flex 应用在需要分栏的子容器上，它的值必须是一个自然数或小数。当父容器里有多个带有 Box-flex 属性的子容器时，浏览器将会把这些子容器的 Box-flex 的值相加，然后根据它们各自的值占总值的比例，再在父容器剩余的空间里分配它们的尺寸（说的 总结

以上是内存溢出为你收集整理的CSS3 灵活的盒子模型(Flexible Box Module)-2全部内容，希望文章能够帮你解决CSS3 灵活的盒子模型(Flexible Box Module)-2所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。