1.多欄布局
使用float或position進(jìn)行頁(yè)面布局時(shí)攻臀，有個(gè)比較顯著的缺點(diǎn)纱昧，元素之間是各自獨(dú)立的，因此經(jīng)常底部不能對(duì)齊设联，導(dǎo)致頁(yè)面中出現(xiàn)一塊空白區(qū)域灼捂。使用多欄布局，可以將一個(gè)元素中的內(nèi)容分為兩欄或多欄去顯示宫蛆。
- 元素內(nèi)部使用多欄布局（指定元素總寬度的猛，多欄均分寬度）：
div#div1{
width: 40em; // 指定元素總寬度
column-count: 2; // 指定內(nèi)部分成兩欄
-moz-column-count: 2; // FireFox
-webkit-column-count: 2; // Safari、Chrome舌厨、Opera
}
- 元素內(nèi)部使用多欄布局（不指定元素總寬度胡诗，指定每欄寬度）：
// 元素如果沒(méi)設(shè)定總寬度，則外面要套個(gè)容器元素
div#container{
width: 42em;
}
div#div1{
column-count: 2; // 指定元素內(nèi)部分兩欄
-moz-column-count: 2;
-webkit-column-count: 2;
column-width: 20em; // 指定每欄寬度
-moz-column-width: 20em;
-webkit-column-width: 20em;
}
- 還可以指定多欄之間的間隔距離骇陈，以及間隔線：
div#div1{
column-count: 2; // 指定元素內(nèi)部分兩欄
-moz-column-count: 2;
-webkit-column-count: 2;
column-width: 20em; // 指定每欄寬度
-moz-column-width: 20em;
-webkit-column-width: 20em;
column-gap: 3em; // 指定欄之間間隔距離
-moz-column-gap: 3em;
-webkit-column-gap: 3em;
column-rule: 1px solid red; // 指定欄之間分隔線
-moz-column-rule: 1px solid red;
-webkit-column-rule: 1px solid red;
}
使用多欄布局時(shí)你雌，各欄寬度是相等的二汛。也不可能具體指定什么欄中顯示什么內(nèi)容肴颊，因此比較適合用在顯示文章內(nèi)容的場(chǎng)景，不適合用于布局網(wǎng)頁(yè)結(jié)構(gòu)授瘦。
2. 盒布局
除多欄布局外竟宋，還可以使用盒布局解決使用float或position時(shí)多欄底部不能對(duì)齊的問(wèn)題丘侠。
- 使用float的舊方式（底部不對(duì)齊）：
#left-sidebar{
float: left;
width: 200px;
padding: 20px;
background-color: orange;
}
#contents{
float: left;
width: 300px;
padding: 20px;
background-color: yellow;
}
#right-sidebar{
float: left;
width: 200px;
padding: 20px;
background-color: limegreen;
}
#left-sidebar, #contents, #right-sidebar{
box-sizing: border-box;
}
- 使用盒布局：
#container{
display: -moz-box; // 指定使用盒布局 FireFox
display: -webkit-box; // Safari、Chrome打肝、Opera
}
#left-sidebar{ // 刪除float
width: 200px;
padding: 20px;
background-color: orange;
}
#contents{ // 刪除float
width: 300px;
padding: 20px;
background-color: yellow;
}
#right-sidebar{ // 刪除float
width: 200px;
padding: 20px;
background-color: limegreen;
}
#left-sidebar, #contents, #right-sidebar{
box-sizing: border-box;
}
3. 彈性盒布局
在使用盒布局時(shí)闯睹，我們對(duì)各區(qū)塊是單獨(dú)設(shè)定寬度的担神。如果想讓區(qū)塊的總寬度等于瀏覽器的寬度始花，并且能隨著窗口寬度的改變而改變，那么彈性盒布局就派上用場(chǎng)了躬窜。因此相比盒布局炕置，彈性盒布局用來(lái)布局整個(gè)網(wǎng)頁(yè)總體結(jié)構(gòu)無(wú)疑是更佳的。
- 將盒布局改成彈性盒布局：
#container{ // box改成flex
display: flex;
}
#left-sidebar{
width: 200px;
padding: 20px;
background-color: orange;
}
#contents{ // 去除中間欄的寬度默垄，改成flex屬性
flex: 1;
padding: 20px;
background-color: yellow;
}
#right-sidebar{
width: 200px;
padding: 20px;
background-color: limegreen;
}
#left-sidebar, #contents, #right-sidebar{
box-sizing: border-box;
}
- 使用order屬性改變?cè)氐娘@示順序（內(nèi)容在最左邊口锭，右欄在中間介杆，左欄在最右邊）：
#container{
display: flex;
}
#left-sidebar{
order : 3;
width: 200px;
padding: 20px;
background-color: orange;
}
#contents{
order: 1;
flex: 1; // 是flex-grow春哨、flex-shrink 和 flex-basis的縮寫(xiě)
padding: 20px;
background-color: yellow;
}
#right-sidebar{
order: 2;
width: 200px;
padding: 20px;
background-color: limegreen;
}
#left-sidebar, #contents, #right-sidebar{
box-sizing: border-box;
}
flex 屬性定義彈性盒模型子元素如何分配“容器剩余空間”，是 flex-grow椰拒、flex-shrink 和 flex-basis 屬性的簡(jiǎn)寫(xiě)屬性：
flex: 1： 則其計(jì)算值為 flex: 1 1 0%癞尚； // 子元素不定義flex相關(guān)屬性時(shí)的默認(rèn)值
flex: auto,：則其計(jì)算值為 flex: 1 1 auto浇揩；// flex-basis為auto，伸縮基準(zhǔn)值為自身width值积锅，如果沒(méi)有定義width养盗，則基準(zhǔn)值為內(nèi)容寬度
flex: none,：則其計(jì)算值為 flex: 0 0 auto往核；// 本子元素不參與容器剩余空間分配
flex-grow：
擴(kuò)展比率，即剩余空間是正值時(shí)此「flex子項(xiàng)」相對(duì)于「flex容器」里其他「flex子項(xiàng)」能分配到空間比例虎锚。在「flex」屬性中該值如果被省略則默認(rèn)為「1」。
flex-shrink：
收縮比率效斑，即剩余空間是負(fù)值時(shí)此「flex子項(xiàng)」相對(duì)于「flex容器」里其他「flex子項(xiàng)」能收縮的空間比例缓屠。在收縮的時(shí)候收縮比率會(huì)以伸縮基準(zhǔn)值加權(quán)在「flex」屬性中該值如果被省略則默認(rèn)為「1」护侮。
flex-basis：
伸縮基準(zhǔn)值概行，即在根據(jù)伸縮比率計(jì)算出剩余空間的分布之前，「flex子項(xiàng)」長(zhǎng)度的起始數(shù)值业踏。在「flex」屬性中該值如果被省略則默認(rèn)為「0%」在「flex」屬性中該值如果被指定為「auto」涧卵，則伸縮基準(zhǔn)值的計(jì)算值是自身的width值柳恐，如果自身的寬度沒(méi)有定義，則長(zhǎng)度取決于內(nèi)容乐设。
- 使用flex-direction改變?cè)氐呐帕许樞?/li>
#container{
display: flex;
border: solid 5px blule;
flex-direction: column; // 縱向排列（默認(rèn)row）
width: 500px
height: 300px;
}
- 控制換行方式
子元素寬度超過(guò)容器時(shí)近尚，默認(rèn)會(huì)進(jìn)行伸縮或擴(kuò)張戈锻。可通過(guò)制定flex-wrap屬性控制換行：
#container{
display: flex;
border: solid 5px blue;
flex-direction: row;
flex-wrap: wrap; // 換行
width: 500px;
height: 300px;
}
#text-a{
background-color: orange;
}
#text-b{
background-color: yellow;
}
#text-c{
background-color: limegreen;
}
#text-a, #text-b, #text-c{
box-sizing: border-box;
font-size: 1.5em;
font-weight: bold;
// 3個(gè)子元素寬度合計(jì)超過(guò)容器寬度哈街，由于對(duì)容器設(shè)置了flex-wrap: wrap拒迅，因此會(huì)換行而不伸縮
width: 250px;
}
4. 彈性盒布局下，指定元素的水平和垂直對(duì)齊方式
當(dāng)flex-grow屬性值不為0時(shí)帝牡，各子元素在main axis軸方向上自動(dòng)伸縮蒙揣，所以justify-content無(wú)效开瞭。
下面假設(shè)彈性盒的布局方向按照默認(rèn)的flex-direction: row懒震，橫向布局：
-
justify-content指定元素在水平方向（main axis）的對(duì)齊方式
justify-content屬性值如下：
flex-start：從main-start開(kāi)始布局所有子元素
flex-end：從main-end開(kāi)始布局所有子元素
center：居中布局所有子元素
space-between：將剩余空間平均分配在子元素之間
space-around：子元素周?chē)骄峙涫Ｓ嗫臻g下面是一個(gè)示例，在容器里指定justify-content：
#container{
display: flex;
border: 5px solid blue;
flex-direction: row;
width: 600px;
height: 30px;
justify-content: flex-end;
}
align-items指定子元素在垂直方向（cross axis）的對(duì)齊方式
align-items屬性值如下：
flex-start：從cross-start開(kāi)始布局所有子元素
flex-end：從cross-end開(kāi)始布局所有子元素
center：居中布局所有子元素
baseline：
stretch：垂直方向上高度被調(diào)整為最大align-self指定某子元素的脫離出align-items的獨(dú)立對(duì)齊方式
align-self屬性值如下：
auto：繼承父元素的align-items屬性值
其他可指定屬性值同align-items
下面是一個(gè)示例嗤详，在容器里指定justify-content：
#container{
display: flex;
border: 5px solid blue;
flex-direction: row;
width: 600px;
align-items: flex-start;
}
#div-a{
background-color: orange;
width: 100px;
font-size: 12px;
align-self: flex-end;
}
#div-b{
background-color: yellow;
width: 150px;
font-size: 24px;
}
#div-c{
background-color: limegreen;
width: 200px;
font-size: 36px;
}
彈性盒多行布局時(shí)（flex-wrap: wrap）个扰，可以使用align-content屬性指定各行的對(duì)齊方式。該屬性與align-items的區(qū)別在于：align-items指定子元素的對(duì)齊方式葱色，而align-content指定行對(duì)齊方式递宅。
