簡單案例解析CSS3的分欄佈局和彈性佈局
阿新 • • 發佈：2019-01-31
分欄佈局
分欄佈局，指按指定列數均分某個容器，每列寬度一樣。分欄佈局主要由三個引數實現：
column-count: 分欄數;
column-gap: 欄間間隙，預設為0px;
column-rule: 欄間線條，預設為0px;
效果圖：<style> #container { height: 300px; border: dashed 2px orange; width: 1000px; column-count: 3; column-gap: 0px; column-rule: solid 0px gainsboro; -moz-column-count: 3; -moz-column-gap: 0px; -moz-column-rule: solid 0px gainsboro; -webkit-column-count: 3; -webkit-column-gap: 0px; -webkit-column-rule: solid 0px gainsboro; } #d1 { background-color: #32CD32; } #d2 { background-color: #87CEEB; } #d3 { background-color: #D2691E; } #d1, #d2, #d3 { height: 300px; overflow: hidden; word-break: break-word; } </style> <div id="container"> <div id="d1"></div> <div id="d2"></div> <div id="d3"></div> </div>
（注）上述程式碼用到-moz-和-webkit-是為了實現瀏覽器的相容。
使用我們接著會介紹的彈性佈局也可以實現同樣分欄佈局的效果：
（注）以上原始碼中還用到了transition，當點選每欄的時候，會有一個寬度變化的動畫效果，類似於展示欄擴張動態效果，變化後的效果圖：<style> #container { width: 1000px; height: 300px; display: flex; border: dashed 1px orange; } #d1 { background-color: #32CD32; } #d2 { background-color: #87CEEB; } #d3 { background-color: #D2691E; } #d1, #d2, #d3 { height: 300px; flex: 1; } .animation { transition: flex 0.5s linear; } </style> <body> <div id="container"> <div id="d1"></div> <div id="d2"></div> <div id="d3"></div> </div> </body> <script> $(document).ready(function() { $("#container div").unbind().bind("click", function(e) { $(this).css("flex", "4"); $($(this).siblings()).css("flex", "1"); //獲取同級其他兄弟元素 }); setTimeout(function() { $("#container div").addClass("animation"); }, 100); }); </script>
彈性佈局
按照文件流的規則，每個div會獨佔一行，在介紹彈性佈局前，這裡再引用一個盒佈局的案例。盒佈局的作用在於實現div共享一行。盒佈局主要引數設定：
display: -moz-box;
display: -webkit-box;
效果圖：<!DOCTYPE html> <meta charset="utf-8" /> <html> <head> <meta charset="utf-8" /> <title></title> <style> #container { display: -moz-box; display: -webkit-box; width: 700px; margin: 0 auto; } #left-sidebar { background-color: orange; width: 200px; padding: 20px; box-sizing: border-box; } #contents { background-color: yellow; width: 300px; padding: 20px; box-sizing: border-box; } #right-sidebar { background-color: limegreen; width: 300px; padding: 20px; box-sizing: border-box; } </style> </head> <body> <div id="container"> <div id="left-sidebar"> <h2>Left Menu</h2> <ul> <li> <a href="#">url</a> </li> <li> <a href="#">url</a> </li> <li> <a href="#">url</a> </li> </ul> </div> <div id="contents"> <h2>Center</h2> <p>新華社北京10月30日電 中央紀委監察部30日召開傳達學習黨的十九大精神大會。中共中央政治局常委、中央紀委書記趙樂際出席會議並講話。他強調，中央紀委監察部在維護以習近平同志為核心的黨中央權威和集中統一領導上擔負著特殊使命和重大責任，必須忠誠履職、勇於擔當，帶頭維護習近平總書記在黨中央和全黨的核心地位，帶頭貫徹習近平新時代中國特色社會主義思想，帶頭落實黨的十九大確定的各項任務，不鬆勁、不停步、再出發，推動全面從嚴治黨向縱深發展。</p> </div> <div id="right-sidebar"> <h2>Right Menu</h2> <ul> <li> <a href="#">url</a> </li> </ul> </div> </div> </body> <script> </script> </html>
（注）盒佈局在此例中實現了共享一行且共享高度height
彈性佈局與和佈局類似，區別在於彈性佈局不必一定設定容器的width值，可以通過一些引數實現彈性變化。
彈性佈局引數設定：
display: flex; 設定為彈性佈局
flex: 該元素按一定比例自動擴充套件寬度或高度。
order: 顯示順序，水平順序：從左(小)到右(大)；垂直順序： 從上（小）到下（大）
flex-direction: 改變排列方向，如當值為column時表示縱向排列，row為水平排序。
flex-wrap: 表示當超出瀏覽器寬度時，是否換行。nowrap不換 ； wrap換 ；wrap-reverse換，但方向相反。
<!DOCTYPE html>
<meta charset="utf-8" />
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#container {
width: 1000px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 auto;
}
#left-sidebar {
order: 1;
background-color: orange;
width: 200px;
padding: 20px;
box-sizing: border-box;
}
#contents {
order: 2;
flex: 1;
background-color: yellow;
padding: 20px;
box-sizing: border-box;
}
#right-sidebar {
order: 3;
background-color: limegreen;
width: 100%;
padding: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="container">
<div id="left-sidebar">
<h2>Left Menu</h2>
<ul>
<li>
<a href="#">url</a>
</li>
<li>
<a href="#">url</a>
</li>
<li>
<a href="#">url</a>
</li>
</ul>
</div>
<div id="contents">
<h2>Center</h2>
<p>新華社北京10月30日電 中央紀委監察部30日召開傳達學習黨的十九大精神大會。中共中央政治局常委、中央紀委書記趙樂際出席會議並講話。他強調，中央紀委監察部在維護以習近平同志為核心的黨中央權威和集中統一領導上擔負著特殊使命和重大責任，必須忠誠履職、勇於擔當，帶頭維護習近平總書記在黨中央和全黨的核心地位，帶頭貫徹習近平新時代中國特色社會主義思想，帶頭落實黨的十九大確定的各項任務，不鬆勁、不停步、再出發，推動全面從嚴治黨向縱深發展。</p>
</div>
<div id="right-sidebar">
<h2>Right Menu</h2>
<ul>
<li>
<a href="#">url</a>
</li>
</ul>
</div>
</div>
</body>
<script>
</script>
</html>
（注）上例中，由於#right-sidebar容器已經超出父容器寬度，會自動流動到下一列。
在實際應用中，導航條也可以通過彈性佈局實現，要有規律的佈置容器內容的各項排序，可以通過以下引數設定：（假設彈性佈局為水平方向佈局）
justify-content，表示當盒子元素沒有完全填充內容時，指定子元素的對齊方式。
（1）flex-start: 從最左邊開始佈局所有子元素
（2）flex-end:從最右邊開始佈局所有子元素
（3）center:居中佈局所有子元素
（4）space-between:將第一個元素佈局在最左邊，最後一個子元素佈置在最右邊，將空白部分平均分配在所有子元素之間。
（5）space-around:將空白部分平均分配到所有子元素之間，包括兩邊邊界也分配空白。
align-items，與justify-content類似，表示子元素垂直方向佈局。
（1）flex-start:從頂部開始佈局所有子元素
（2）flex-end:從底部開始佈局所有子元素
（3）center: 居中佈局所有子元素
（4）baseline:如果子元素佈局方向與容器方向不一致，則等效於flex-start,否則所有子元素內容沿著基線對齊
（5）stretch: 同一行中所有子元素高度調整為最大，為預設值。
align-self，與align-items引數及功能一樣，但區別在於align-self效果只能作用於單一子元素自身。
<!DOCTYPE html>
<meta charset="utf-8" />
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#container {
text-align: center;
display: flex;
width: 1000px;
border: dashed 1px blue;
flex-direction: row;
justify-content: center;
}
#container div {
padding: 30px;
width: 100px;
}
#d1 {
background-color: orange;
}
#d2 {
background-color: yellow;
}
#d3 {
background-color: limegreen;
}
#container1 {
width: 1000px;
height: 300px;
border: dashed 1px blue;
text-align: center;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: space-between;
}
#container1 div {
padding: 30px;
}
#d4 {
background-color: orange;
}
#d5 {
background-color: yellow;
}
#d6 {
background-color: limegreen;
}
#container2 {
width: 1000px;
height: 300px;
text-align: center;
display: flex;
border: dashed 1px blue;
flex-direction: row;
align-items: center;
}
#container2 div {
padding: 30px;
width: 100px;
font-size: 12px;
}
#d7 {
background-color: orange;
align-self: flex-start;
}
#d8 {
background-color: yellow;
align-self: flex-end;
}
#d9 {
background-color: limegreen;
}
</style>
</head>
<body>
<div id="container">
<div id="d1">示例文字1</div>
<div id="d2">示例文字2</div>
<div id="d3">示例文字3</div>
</div>
<br />
<div id="container1">
<div id="d4">示例文字4</div>
<div id="d5">示例文字5</div>
<div id="d6">示例文字6</div>
</div>
<br />
<div id="container2">
<div id="d7">示例文字7</div>
<div id="d8">示例文字8</div>
<div id="d9">示例文字9</div>
</div>
</body>
<script>
</script>
</html>
（注）上例中#d9並沒有設定align-self，因此它垂直方向的佈局繼承於#container2的align-items: center;