Some new box model parameters are introduced in the CSS3 standard. Based on CSS2, We can flexibly adjust the size and location of each container on the page. For more information, see this document.
Through learning and testing, I found that this new box model layout brings great benefits to the establishment of Adaptive Layout pages. In this article, all my examples are based on the following HTML code:
<Body>In general, all containers on the page are arranged in the order of loading. With the functions provided by CSS3, we can change the container display position without changing the HTML structure, which not only brings great convenience to the layout, we can also use these features for traffic shaping.
When using the Flexible Box Module, we need to set the Display attribute of its parent container to box or inline-box.
Horizontal and vertical distributionWe can use the box-orient attribute to specify the distribution axis of the container. When the value of this attribute is vertical, its sub-containers are vertically distributed (or block-axis ), when the value is horizontal, its sub-containers are horizontally distributed (or inline-axis ). In the first example of this article, I used the following CSS:
# Exemple1. content {For the specific effect, you can see this DEMO. The three sub-Div containers are all horizontally tied.
Note: This effect can also be achieved through Display: inline; theoretically in CSS2, but no one will do this due to some browser bugs.
Reverse OrderThe box-direction attribute allows us to change the display sequence of containers at will. We know that by default, block-level elements are arranged from top to bottom according to the loading order, and inline-level elements are arranged from left to right, but now we can use the box-direction attribute to display the last loaded block-level elements at the top, and the last loaded inline-level elements on the left.
However, when using this attribute, you must note that it may change some attributes of the element to produce some uncontrollable results.
In the second example, I used the following CSS:
# Exemple2. content {You can see this DEMO. We can find that the order of containers is changed without changing the HTML structure.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
