CSS elastic Layout

From: http://www.blueidea.com/tech/web/2011/8693.asp

Background

First, we have a table layout. When semantics is not taken into consideration and some appropriate nesting and other techniques are used, we can use table to create a layout with certain functions.

Then there is the floating layout that most people are currently using. We can use any element we want, but floating is not suitable for beginners. On the surface, it looks very basic, but the complex functions behind it can make experienced developers look at their own screens at a loss. In addition, a disadvantage of floating layout is that you need to clear the floating through additional elements, or better, you can clear CSS floating without adding additional labels.

These disadvantages make the floating layout not easy to grasp, because there is no default method to establish the relationship between the floating and the elements, so we need more methods to achieve a multi-column and high-level layout.

Then some people started to use display: Table, display: Table-cell, etc. However, since it was not supported by Internet Explorer in IE8, people seem to have abandoned it and simply accept float as the actual solution.

Introduction to the elastic box model layout module (aka flex box)

There is a hidden weapon: the elastic box model layout module that most people seem to have overlooked. It provides:

• And other columns.
• Independent element sequence.
• Specifies the relationship between elements.
• Flexible dimensions and alignment.

A simple example

When we want to display a three-column layout, we will do this:

 

<Div class = "flex-container">
<Div class = "col-1"> I am column 1 </div>
<Div class = "col-2"> I am Column 2 </div>
<Div class = "col-3"> I am column 3 </div>
</Div>

 

. Flex-container {
Display:-moz-box;
Display:-WebKit-box;
Display: box;
-Moz-box-Orient: horizontal;
-WebKit-box-Orient: horizontal;
Box-Orient: horizontal;
}

We use the display attribute to set the container element to box, and then use the box-orient attribute to set it horizontally (you can also use vertical to set it to vertical ).

Using this method, directly sub-elements (such as <Div class = "col-1">) will be placed horizontally one by one, and their width is determined by their content. But what if we want to use an adaptive method to extend them to the width of the entire container element? Then we need to set box-flex for them:

 

. Col-1 {
-Moz-box-Flex: 1;
-WebKit-box-Flex: 1;
Box-Flex: 1;
}
. Col-2 {
-Moz-box-Flex: 1;
-WebKit-box-Flex: 1;
Box-Flex: 1;
}
. Col-3 {
-Moz-box-Flex: 2;
-WebKit-box-Flex: 2;
Box-Flex: 2;

}

The value of the box-Flex attribute refers to how the space remaining in the parent container except the sub-container is divided by the quilt container, just as Zoe commented. The larger the number, the more it is divided. This also means that the padding of each element does not increase its width.