HTML5+CSS3 web page production: adaptive three-column layout width

Article introduction of Wulin.com (www.vevb.com): CSS3+HTML5 study notes 4--CSS three-column layout-width only adapts.

In the past, when doing three-column layout, the most common and simplest method might be: using float+margin to implement it. In the era of CSS3, we could have another fashionable method, which is the box model in css3, with the code as follows:

The operation effect under Google Chrome is as follows:

Summary: The box-flex attribute is mainly used here. This attribute mainly allows the child container to divide the width according to certain rules relative to the parent container. If the three child containers set the box-flex value to 1, 2, and 3 respectively, the three child containers will divide the width according to a ratio of 1:2:3.

Of course, the parent container must be set to be a box model to see the effect, such as display:-webkit-box; display:-moz-box;

However, if you run the above code directly, there is no problem in chrome, but when it comes to FireFox, it becomes the following:

, is this a FireFox bug? Originally, the widths on the left and right sides were fixed, but the widths in the middle did not have an adaptive width. After communicating with the author of "The Authoritative Guide to HTML5 and CSS3", I realized that this situation occurs because the width of the parent container is not set. Just add width:100% to the parent container. . . Thank you to the author of "HTM5 and CSS3 Authoritative Guide"...