CSS3 Flexible Box Module-2

The previous article "CSS3 Flexible Box model (Flexible Box Module)-1" went on to discuss the size of the Box model in CSS3. The HTML framework in this article continues to use the Flexible Box Module-1 in CSS3.

In CSS2, to divide a container into three columns, set the width of the Three-character container to 33.3%. This method cannot completely fill the width of the parent container, when the width of the parent container is large enough, the blank space will make the page very bad. One way is to set the width of the sub-container to a fixed value by calculating. This method is cumbersome, in some cases, the width of the sub-container cannot be completely equal (for example, the width of the parent container is px ). When we enter the CSS3 era, this problem will be solved.

Box-flex attributes

Box-flex is applied to sub-containers that need to be split into columns. Its value must be a natural number or decimal number. When the parent container contains multiple sub-containers with the box-flex attribute, the browser will add the box-flex values of these sub-containers, then, based on the ratio of their respective values to the total value, allocate their dimensions in the remaining space of the parent container (I can see the DEMO as a matter of fact ). That is to say, we need to note that the box-flex attribute can be rendered normally only when the parent frame has a specific width or height.

Flexible dimensions

In this example, I will make the sub-container 2 and 3 equal in width, and the sub-container 1 is twice the width of them. Because the box-flex attribute is used, if a sub-container is inserted, the width of the existing container is automatically adjusted. CSS:

# Exemple4. content {
-Moz-box-orient: horizontal;
-Webkit-box-orient: horizontal;
Box-orient: horizontal;
}
# Exemple4. v1 {
-Moz-box-flex: 2;
-Webkit-box-flex: 2;
Box-flex: 2;
}
# Exemple4. v2 {
-Moz-box-flex: 1;
-Webkit-box-flex: 1;
Box-flex: 1;
}
# Exemple4. v3 {
-Moz-box-flex: 1;
-Webkit-box-flex: 1;
Box-flex: 1;
}

You can see this DEMO for the effect. You can also download this DEMO and try to add a new sub-container. Is it automatically adapted.

Hybrid use of adaptive sub-containers and fixed-size sub-containers

Another strength of box-flex is that it can be used together with a fixed-size container. I changed the example above, and changed sub-container 3 to a fixed width of PX. The rest will remain unchanged to see what the effect is.

# Exemple5. content {
-Moz-box-orient: horizontal;
-Webkit-box-orient: horizontal;
Box-orient: horizontal;
}
# Exemple5. v1 {
-Moz-box-flex: 2;
-Webkit-box-flex: 2;
Box-flex: 2;
}
# Exemple5. v2 {
-Moz-box-flex: 1;
-Webkit-box-flex: 1;
Box-flex: 1;
}

# Exemple5. v3 {
Width: 160px;
}

• 2 pages in total:
• Previous Page
• 1
• 2
• Next Page