CSS3 Realization of Elastic box model application

As part of the CSS3 specification, the flexible box layout model simplifies the CSS code needed to complete the layout in many typical scenarios. The layout model also provides a number of useful features to meet common layout requirements, including arranging, aligning, resizing, and allocating white space for items in a container. The flexible box layout model can be a good tool in the WEB Developer Toolkit.

1, CSS clear floating. Parent element If no height is set, the parent element's height is stretched by the default child element. If a child element is set to float, it cannot open the height of the parent element.

2, using @media only screens for different screen size device writing style is a very complicated thing, all the construction of the page structure is the best, and then by setting the display of the element to shadow and display elements.

Once the page structure is formed, unless it is through the JS dynamic additions and deletions, through @media only screen we can only modify attributes and not additions and deletions of elements.
Max-width and Min-width refer to the width of the entire window, including the width of the scroll bar.

3, the Standard Model, the strange model, the elastic box model of the difference and usage.

4. The related attributes and usages of bootstrap.

The above is the knowledge that is mastered today, the nonsense is not much to say into the point.
How to implement the following peer element child wrap, and after wrapping, each line element still fills the width of the entire parent element.
Take a look at the following pictures:

Status 1

Status 2

Status 3

Status 4
The above 4 images are the changes in the state of the browser window from the large to the navigation bar.
My page is written in Bootstrap, above is the button group in the bootstrap, the default peer display, the size of the Open button by the font
Status 1 to State 2
The font and button size of State 1 are larger, and this process is implemented via CSS @media only.
Status 2 to State 3
This is our focus.
How do I implement line element wrap?
If the companion element has a fixed width, it is generally not wrapped automatically.
If a peer element is assigned a percentage, there will always be a width value, and no line break will be implemented.
What if the width and height of the elements are stretched by the content?
Set the display:inline-block for the element;

Goku and the eight commandments two elements will appear in the middle of the gap. But the automatic line-wrapping was realized.
What if I add a floating effect to an element?

The floating effect is better than display:inline-block;
But both of these have realized the automatic line-wrapping, but the end result is not what we want.
The effect we want is from state 2 to state 3, after the element wraps, the element occupies the entire line, and the space on the last line is filled with other elements.
My approach is to use the elastic box model
The parent element adds the following properties

display:flex;//indicates that the element is a flexible box model element. flex-wrap:wrap;//indicates that a line is wrapped when the boundary is encountered.

All child elements are added


flex-grow:1;//defines the proportion of an element in an entire row, and if it is 1, the width of all elements in the peer is the same. Wrapped elements occupy the entire line. State 3 and State 4.

The purpose of introducing the flexible box layout model is to provide a more efficient way to arrange, align, and allocate white space for items in a container. Even if the size of the item in the container is unknown or dynamically changing, the flexible box layout model can work properly. In this layout model, the container adjusts the size and order of the entries contained in the layout to best populate all available space. When the size of a container changes due to screen size or window size, the items contained therein are also dynamically adjusted. For example, when the size of the container becomes larger, the items contained therein are stretched to fill the extra empty space, and when the container size becomes small, the entry is reduced to prevent the container from exceeding its range. The Flex box layout is independent of orientation. In the traditional layout, the block layout arranges the blocks in a vertical direction from top to bottom, while the inline layout is arranged horizontally. The flexible box layout does not have this inherent direction limitation and can be freely operated by the developer.

Related Box model articles:

CSS quirks box model and standard box model example detailed

Flexible box Model Flex Method Summary