Elastic layout of CSS classic Layout

Elastic layout of CSS classic Layout

When browsing a browser, we often zoom in/out the Browser display ratio, or on different devices, the resolution is also different. Therefore, we need to learn a new knowledge: elastic box model.

The elastic box model enables project alignment, orientation, and sorting (even if the project size and position are dynamically generated). It can dynamically modify the width and height of sub-elements and has good adaptability.
It is an approximate range of elastic layout. Elastic container Properties

Attribute	Description
Flex-direction	Set the direction of the spindle to determine the arrangement of the elastic child elements
Flex-wrap	Whether to wrap a line when the elastic sub-element is out of the range of the elastic container
Flex-flow	Compound attributes, flex-direction and flex-wrap
Justify-content	Alignment on the spindle
Align-items	Alignment on the side axis
Align-content	Blank on the side axis, alignment of the side axis

The following describes how to implement a responsive menu with an elastic layout. Let's look at the Code:

. Menu {list-style-type: none; padding: 0; margin: 0; display:-webkit-flex; display:-ms-flexbox;/* display: flex; // activate flex-flow: row wrap; // attributes of the elastic container */}. menu li {width: auto; height: 40px; text-align: center; line-height: 40px; flex: 1 100%; // The scaling ratio is 1, the shrinkage ratio is 1, and the initial width is 100% }. menu li: nth-child (1) {background-color: pink ;}. menu li: nth-child (2) {background-color: plum ;}. menu li: nth-child (3) {background-color: hotpink ;}. menu li: nth-child (4) {background-color: palevioletred ;}. menu li: nth-child (5) {background-color: deeppink ;}. menu li: nth-child (6) {background-color: purple ;}. menu li a {color: black; text-decoration: none;} @ media (max-width: 480px ){. menu {flex: 1 100%; flex-flow: row wrap; }}@ media (min-width: 768px ){. menu {flex-flow: row nowrap ;}}

We have achieved an approximate model of elastic layout. Another question I have seen before is to write an elastic layout question, but we can also find another way: To achieve the layout requirement shown in: sidebar fixed width 200px, the content and header width are adaptive. When the window width is less than 600px, it becomes a three-column layout.
The idea of implementation is the same as that of flexible layout. Let's look at the Code:

Headersidebarcontent