CSS base multi-column layout

This article mainly introduces the CSS base multi-column layout, has a certain reference value, now share to everyone, have the need for friends can refer to

Front-end layout

The basic layout, the main display on the mobile side, the same PC-side applies. Divided into one column, two columns, three columns, four columns.
This is accomplished in two ways.
First set the base style:

/*==================common css start================*/ul{list-style:none;        Background: #f0f1f1;    padding:30px 15px;        } li{background: #fff;        Text-align:center;        border:1px solid #5d2a22;        padding:15px;    Box-sizing:border-box;        }. clearfix::after{content: "";        Display:block;    Clear:both; }/*==================common CSS end================*//*==================html start================*/<!--a column--        > <ul class= "one Clearfix" > <li> selected CCTV China annual brand </li> <li> get hair Agency right </li> <li> signed 5G Screening Cooperation agreement </li> <li> nationwide opening of nearly 20 branches </li> </ul> <!--two-<ul CLA ss= "Clearfix" > <li> selected CCTV China annual brand </li> <li> get hair agent </li> <li> sign 5G Screening cooperation Agreement </li> <li> nationwide opening of nearly 20 branches </li> </ul> <!--three-and <ul class= "three Clearfix       "> <li> selected CCTV China </li> <li> get hair agent </li> <li> Sign 5G Screening Cooperation Agreement </li> <li& gt; Nearly 20 nationwide </li> <li> understanding of implant needs </li> <li> recommending professional physicians </li> </ul> <!--four columns- -<ul class= "four Clearfix" > <li> consulting </li> <li> positioning </li> <li> Inspection Test </li> <li> Customization </li> <li> assist </li> <li> Maintenance </li> <li&gt ; Consulting </li> <li> customization </li> </ul>/*==================html end================*/

2. Traditional calculation: Floating + width Accurate calculation

   /*============== tradition (floating + clear floating + width accurate calculation) start=======        ==========*//*.one Li:nth-child (n+2) {margin-top:15px;            }. li{Float:left;        width:48%;        }. Li:nth-child (even) {margin-left:4%;        }. Li:nth-child (n+3) {margin-top:15px;            }. Three li{float:left;            width:32%; margin-left:2%}. Three Li:nth-child (3n-2) {margin-left:0%}. Three Li:nth-child (n+        4) {margin-top:15px;            }. Four li{float:left;            width:22%;        margin-left:4%}. Four Li:nth-child (4n-3) {margin-left:0;        }. Four Li:nth-child (n+5) {margin-top:15px; }*//*============== Tradition (floating + clear floating + width accurate calculation) end=================*/

4. Flex Calculation Method: Flex

           /*================flex (set width as required) start=================*//        * for easy viewing, this does not remove the Clearfix class name separately */        . Clearfix::after {            content:none;        }        ul{            Display:flex;            Flex-wrap:wrap;            Justify-content:space-between;        }        . One li{            width:100%;        }        . One li:nth-child (n+2) {            margin-top:15px;        }        . Both li{            width:48%;        }        . Li:nth-child (n+3) {            margin-top:15px;        }        . Three li{            width:32%;        }        . Three Li:nth-child (n+4) {            margin-top:15px;        }        . Four li{            width:23%;        }        . Four Li:nth-child (n+5) {            margin-top:15px;        }        /*================flex (set width as required) end=================*/

   The two ways to achieve the same effect, such as:
   

Summarize

If you use the

, you need to accurately calculate the width of the element and the interval of the element, slightly biased, and the layout will be disrupted.
Using mode Two, you only need to consider the width of the element, using Justify-content:space-between, you can achieve the effect of decentralized center.
If you want to learn more about the Flex layout, refer to the documentation for the great God
Flex Layout Tutorial: Syntax Chapter http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
Flex Layout Example http://static.vgee.cn/static/index.html