css基礎多欄佈局
阿新 • • 發佈:2018-11-28
前端佈局
基礎佈局,主要展現在移動端,pc端同樣適用。分為一欄、兩欄、三欄、四欄。
這裡使用了兩種方式實現。
首先設定基礎樣式:
/*==================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================*/
<!--一列-->
<ul class="one clearfix">
<li>入選CCTV中國年度品牌</li>
<li>獲得Hair代理權</li>
<li>簽署5G篩查合作協議</li>
<li>全國開設近20家分院</li>
</ul>
<!--兩列-->
<ul class="two clearfix">
<li>入選CCTV中國年度品牌</li >
<li>獲得Hair代理權</li>
<li>簽署5G篩查合作協議</li>
<li>全國開設近20家分院</li>
</ul>
<!--三列-->
<ul class="three clearfix">
<li>入選CCTV中國</li>
<li>獲得Hair代理權</li>
<li>簽署5G篩查合作協議</li >
<li>全國開設近20家</li>
<li>瞭解植髮需求</li>
<li> 推薦專業醫師</li>
</ul>
<!--四列-->
<ul class="four clearfix">
<li>諮詢</li>
<li>定位</li>
<li>檢測</li>
<li>定製</li>
<li>輔助</li>
<li>養護</li>
<li>諮詢</li>
<li>定製</li>
</ul>
/*==================html end================*/
傳統計算方式:浮動+寬度精確計算
/*==============傳統(浮動+清浮動+寬度精確計算) start=================*/ /*.one li:nth-child(n+2){ margin-top: 15px; } .two li{ float: left; width: 48%; } .two li:nth-child(even){ margin-left: 4%; } .two 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; }*/ /*==============傳統(浮動+清浮動+寬度精確計算) end=================*/
flex計算方式:flex
/*================flex(按照需求設定寬度) start=================*/ /*為方便檢視,這裡不單獨去掉clearfix類名了*/ .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; } .two li{ width: 48%; } .two 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(按照需求設定寬度) end=================*/
兩種方式實現的效果一樣,如下圖:
總結
使用方式一的話,需要精確計算元素的寬度和元素的間隔,稍微有點偏差,佈局就會被打亂。
使用方式二,只需要考慮元素寬度即可,使用justify-content: space-between;就可以實現分散居中的效果。
如果想了解更多flex佈局,參考大神的文件吧
Flex 佈局教程:語法篇 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
Flex 佈局示例 http://static.vgee.cn/static/index.html