"CSS" recalls the classic layout

See this picture believe most people are very familiar with, this was a classic layout, a classic face test, but with the years of circulation, time of the alternation (quite a "world of the wind and my generation, one into the rivers and lakes years urge" feeling, haha), it step by step gradually withdrew from the historical stage, but in the classic, Always have its classic meaning in the inside, today I try to stand in their own cognitive range, re-interpretation of the next classic, the means of implementation is to use a variety of possible ways to achieve this classic layout:

1, based on the implementation of BFC

. layout1 {height:100px;overflow:hidden}.layout1. l {height:100%;width:100px;float:left;}. Layout1. m {height:100%;margin:0 200px 0 100px;}. Layout1. R {height:100%;width:200px;float:right;} <div class= ' layout1 ' ><div class= ' l ' ></div><div class= ' r ' ></div><div class= ' m ' > Layout1</div></div>

The first line in the diagram is implemented in this way, the principle is simple, the use of floating elements out of the document flow characteristics, left floating on the left, floating on the right, simple and rough.

2. Holy Grail Layout

. layout2 {height:100px;overflow:hidden;padding:0 200px 0 100px;}. Layout2. m {float:left;width:100%;height:100%;}. Layout2. L {float:left;width:100px;margin-left: -100%;p osition:relative;left: -100px;}. Layout2. R {width:200px;margin-left: -200px;float:left;position:relative;right: -200px;} <div class= ' layout2 ' ><div class= ' m ' >layout2</div><div class= ' l ' ></div><div class= ' R ' ></div></div>

In order to ensure the early display of DOM elements, and the most important elements in the first analysis, optimize the user experience, using negative margin and relative positioning to adjust the position of the left and right elements, the use of large containers of padding as the adjustment of space hack, very classical method;

3. Double Flying Wing layout

. layout3 {Height:100px;overflow:hidden;}. Layout3. m-wrap {width:100%;float:left;height:100%;}. Layout3. m {margin:0 200px 0 100px;}. Layout3. L {float:left;width:100px;margin-left:-100%;}. Layout3. R {float:left;width:200px;margin-left: -200px;} <div class= ' layout3 ' ><div class= ' m-wrap ' ><div class= ' m ' >layout3</div></div><div class= ' l ' ></div><div class= ' R ' ></div></div>

Basically consistent with the previous approach, the only difference is the addition of a label, without relying on the root container to do hack

4. Flex implementation

. layout4 {display:flex;height:100px;}. Layout4. L {flex:0 0 auto;width:100px;}. Layout4. m {flex:1 1 auto;}. Layout4. R {flex:0 0 auto;width:200px;} <div class= ' layout4 ' ><div class= ' l ' ></div><div class= ' m ' >layout4</div><div class= ' R ' ></div></div>

The implementation is very simple, using the characteristics of the telescopic box model, only need to open the middle element of the flex-grow (in order to ensure that the normal display when the author also opened the Flex-shrink) can be a very easy to achieve this layout, but for the sake of aesthetics, I did not paste the code of compatibility.

Think all the way seems to have been poor to lift? In fact, there are new rules just introduced last year Css-grid can try, so

5. CSS Grid

. layout5 {height:100px;display:grid;grid-template-columns:100px 1fr 200px;} <div class= ' layout5 ' ><div class= ' l ' ></div><div class= ' m ' >layout5</div><div class= ' R ' ></div></div>

As you can see, the implementation of CSS-based grids is the most convenient, based on the need not to manipulate the grid item, only need to set the container can be easily implemented, but because it is new things, so compatibility is poor.

It is no wonder that this is a classic layout, almost all the new layout is very friendly in support of it, from the savage era to use a variety of hack means to achieve, to the modern easy implementation, but also to the development of CSS in the important position, now want to also really, CSS3 before the CSS more like a tool-based language, it does not have any elegant features, no interesting, and to the CSS3 era, no matter from the performance optimization, engineering improvement, are commendable.

Of course, similar to the classic implementation of the CSS there are many, such as a variety of vertical center method, and JS replacement way, the old technology is constantly replaced by new technology, and in the CSS field, this phenomenon is often, and of course, browser vendors, various platforms, complex compatibility scenarios, But the ideas contained therein are like the design ideas of jquery, but they do not go out of date with the passage of time, but they are precious at certain times.

CSS recalls the classic layout