Flexible layout of CSS classic layouts

When we browse the browser, we often zoom in/out of the browser's display scale, or on different devices. The resolution is also different.

So. We need to learn a new knowledge: Elastic box model.

Elastic Box ModelImplement project alignment, orientation, and sorting (even if the project size location is dynamically generated), you can dynamically change the width and height of the child elements. Has a good adaptability.

is an approximate range of elastic layouts. Elastic Container Properties

Property	Description
Flex-direction	Sets the spindle orientation. Determining the arrangement of elastic sub-elements
Flex-wrap	Whether the flex element extends beyond the elastic container range is line wrapping
Flex-flow	Composite properties. Flex-direction and Flex-wrap Dual properties
Justify-content	Alignment on the spindle
Align-items	Alignment on the side axis
Align-content	Blank on the side axis, side axis alignment

here's how to implement the responsive menu in a flexible layout, first look at the code:

<! DOCTYPE html>
. menu{    List-style-type:none;    padding:0;    margin:0;    Display:-webkit-flex;    Display:-ms-flexbox;    /*display:flex;    Activate Flex mode    Flex-flow:row wrap;     Properties of the elastic container */}.menu li{    width:auto;    height:40px;    Text-align:center;    line-height:40px;    Flex:1 1 100%;      The scaling scale is 1, and the contraction ratio is 1. 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 1 100%;        Flex-flow:row wrap;    }} @media (min-width:768px) {    . menu {        flex-flow:row nowrap;    }}

Above, we have achieved a general model of the elastic layout.
Another question I have seen before is the requirement to write a flexible layout, but we can also find a better alternative:implement for example the layout requirements that you see: Sidebar fixed width 200px. The content and header widths are adaptive when the window width is less than 600px. Become a three-column layout
we realize the same idea as the elastic layout, look at the code:
<!    DOCTYPE html>


 
Flexible layout of CSS classic layouts