這篇文章主要介紹了關於css基礎多欄佈局，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下
#基礎佈局，主要展現在行動端，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
#相關推薦：
以上是css基礎多欄佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章！
