CSS layout in common

A, css common layout What?

(1) two layouts

(2) three layouts 

(3) Elastic layout

(4) Layout Grail

(5) Flying wing

Second, the specific implementation 

(1) two layouts

       https://www.cnblogs.com/qing-5/p/11442906.html 

(2) three layouts

       https://www.cnblogs.com/qing-5/p/11338819.html

(3) the layout of the Holy Grail and Flying wing

     Same point:

　　a, three layout, adaptive intermediate width, on both sides of a fixed width;

　　b, to give priority to the middle column shows rendered in the browser;
　　c, the maximum allowed height of any column;
　　d, requires only one additional DIV tag;
　　E, requires the most simple CSS, minimal HACK statement;
　　

     difference:

   Flying wing layout and Grail Solution to Problem The first half is the same:

That is floating all three columns, two columns around with a negative margin, let it side by side with the middle column div. 

Except that solve the "middle column div content is not blocked," the idea is not the same problem.

    (4), the layout of the Holy Grail

<style> 
        .container { 
            padding : 0 0 100px 200px ; 
        } 
        .left { 
            width : 200px ; 
            background : Red ;
             / * Key: element will move to the left along the document flow, a relatively large negative value it will always move to the line * / 
            margin-left : -100% ; 
            left : -200px ; 
        } 
        .right { 
            width : 100px ; 
            background : Blue;

            margin-left: -100px;
            right: -100px;
        }
        .main {
            background: yellow;
            width: 100%;
        }
        .left, .main, .right{
            float: left;
            min-height: 200px;
            position: relative;
        }

    </style>

<div class="container">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

(5), Flying wing

<style type="text/css">
        .left, .main, .right {
            float: left;
            min-height: 130px;
            text-align: center;
        }
        .left {
            margin-left: -100%;
            background: green;
            width: 200px;
        }
        .right {
            margin-left: -300px;
            background-color:Red ; 
            width : 300px by ; 
        } 
        .main { 
            background-Color : Blue ; 
            width : 100% ; 
        } 
        .content {
             / * Key: div pushed by the intermediate margin normal display * / 
            margin : 0 0 300px by 200px ; 
        } 
    < / style>

<div class="container">
    　   <div class="main">
    　　 <div class="content">main</div>
</div>
    　　<div class="left">left</div>
    　　<div class="right">right</div>
</div>

( 6), the elastic arrangement (flexbox)

　　CSS3 introduces a new layout patterns --Flexbox layout, i.e. stretching layout box model (Flexible Box), to provide a more efficient way to develop, and adjusting a distribution container project layout, even if their size is unknown or dynamic, here referred to as Flex.
　　Flexbox layout commonly used in the design of more complex pages, you can easily implement changes to keep elements of the screen when the browser window size and the relative position and the same size, while reducing dependence on floating layout implementation-defined position of the element and reset element size.

Reference Links: https://www.jianshu.com/p/81ef7e7094e8