1 多欄佈局

使用多欄佈局可以將一個元素中的內容分為兩欄或多欄顯示，並且確保各欄中內容的底部對齊。

• column-count屬性

 在CSS3中，通過該屬性來使用多欄佈局方式，該屬性的含義是將一個元素中的內容分為多欄進行顯示。

（1）瀏覽器書寫

Firefox：“-moz-column-count”

Safari、Chorme、Opera：“-webkit-column-count”

IE中不需新增字首。

（2）使用多欄佈局時，需要將元素的寬度設定成多個欄目的總寬度。

• column-width屬性

也可以使用該屬性單獨設定每一欄的寬度而不設定元素的寬度

。

（1）瀏覽器書寫

Firefox：“-moz-column-width”

Safari、Chorme、Opera：“-webkit-column-width”

IE中不需新增字首。

column-count：2；

-moz-column-count：2；

-webkit-column-count：2；

column-width：20em；

-moz-column-width：20em；

“-webkit-column-width：20em；

（2）使用該屬性指定每欄寬度而不設定元素的寬度，則需要在元素外面單獨設立一個容器元素，然後指定該容器元素的寬度，否則指定的每欄寬度被瀏覽器視為未作設定

。

• column-gap屬性

（1）功能

設定多欄之間的間隔距離

（1）瀏覽器書寫

Firefox：“-moz-column-gap”

Safari、Chorme：“-webkit-column-gap”

IE中不需新增字首。

column-gap：3em；

-moz-column-gap：3em；

-webkit-column-gap：3em；

• column-rule屬性

（1）功能

在欄與欄之間增加一條間隔線，並且設定該間隔線的寬度、顏色等。（與border屬性的屬性值指定方法相同）

column-rule：1px solid red；

-moz-column-rule：1px solid red；

-webkit-column-rule：1px solid red；

2 盒佈局

• box屬性

在CSS3中，通過該屬性來使用盒佈局

（1）瀏覽器書寫

Firefox：“-moz-box”

Safari、Chorme、Opera：“-webkit-box”

display：-moz-box；

display：-webkit-box；

（2）盒佈局與多欄佈局的區別

1. 使用多欄佈局時，各欄寬度必須是相等的，在指定每欄寬度時，也只能為所有欄指定一個統一的寬度，欄與欄之間的寬度不可能是不一樣的。

2.使用多欄佈局時，也不可能具體指定什麼欄中顯示什麼內容，因此比較適合使用在顯示文章內容的時候，不適合用於安排整個網頁中由各元素組成的頁面結構的時候。

3 彈性盒佈局

如果想讓三個div元素的總寬度等於瀏覽器視窗的寬度，而且能夠隨著視窗寬度的改變而改變時，該怎麼設定呢？

• flex屬性

使盒佈局變為彈性盒佈局

#container{

display：flex；

}

#left-sidebar{

width：200px；

padding：20px；

background-color：orange；

}

#contents{

flex：1；

padding：20px；

background-color：yellow；

}

#right-sidebar{

width：200px；

padding：20px；

background-color：limegreen；

}

• order屬性

（1）功能

改變各元素的顯示順序。可以在每個元素的樣式中加入order屬性，該屬性使用一個表示序號的整數屬性值，瀏覽器在顯示的時候根據該序號從小到大顯示這些元素。

#container{

display：flex；

}

#left-sidebar{

order：3；

}

#contents{

flex：1；

order：1；

}

#right-sidebar{

order：2；

}

• flex-direction屬性

（1）功能

改變元素的排列方向。

（2）值

row：橫向排列（預設值）。row-reverse：橫向反向排列。

column：縱向排列。              column-reverse：縱向反向排列。

#container{

display：flex；

flex-direction：column；

}

• 元素高度與寬度的自適應

（1）使用盒佈局的時候，元素的高度與寬度具有自適應性，即元素的寬度與高度可以根據排列方向的改變而改變。

（2）當有一個容器元素，元素中有三個div元素，只對容器元素指定了寬度和高度，結果當排列方向被指定為水平方向時，三個元素的寬度為元素中內容的寬度，高度自動變為容器的高度，當排列方向被指定為垂直方向時，三個元素的高度為元素中內容的高度，寬度自動變為容器的寬度。（存在大片空白區域）

• 使用彈性盒佈局來消除空白

（1）使得多個參與排列的元素的總寬度與總高度始終等於容器的寬度和高度。

• #container{

  display：flex；

  }

  #contents{

  flex：1；

  }

如果使用彈性盒佈局，使用了box-flex屬性的元素的寬度與高度總會自動擴大，使得參與排列的元素的總寬度與總高度始終等於容器的寬度和高度。

（2）可對多個元素使用flex屬性

• flex-grow屬性

（1）功能

指定元素寬度或高度。

#container{

display：flex；

flex-direction：row；

}

#left-sidebar{

flex-grow：1；

}

#contents{

flex-grow：1；

}

#right-sidebar{

flex-grow：3；

}

• flex-shrink屬性

（1）功能

指定元素寬度或高度。

（2）與flex-grow屬性關係

當元素排列方向為橫向排列時：如果子元素的width樣式屬性值的總和小於容器元素的寬度值，必須通過flex-grow屬性（加上加權空白）來調整子元素寬，若大於則必須通過flex-shrink屬性（減去加權超出部分）來調整子元素寬度。

當元素排列方向為縱向排列時：如果子元素的height樣式屬性值的總和小於容器元素的高度值，必須通過flex-grow屬性來調整子元素寬，若大於則必須通過flex-shrink屬性來調整子元素寬度。

結果：參與排列的元素的總寬度與總高度始終等於容器的寬度和高度

#container{

display：flex；

flex-direction：row；

}

#left-sidebar{

flex-shrink：1；

}

#contents{

flex-shrink：1；

}

#right-sidebar{

flex-shrink：3；

}

• flex-basis屬性

（1）功能

指定調整前的子元素寬度，與width屬性的作用完全相同。

• 屬性合併

（1）flex：flex-grow樣式屬性值    flex-shrink樣式屬性值    flex-basis樣式屬性值；（均為可選樣式屬性）

（2）不指定flex-grow， flex-shrink時，預設樣式屬性值為1；flex-grow， flex-shrink 預設樣式值為 0px；

（3）子元素為橫向排列時，flex-grow， flex-shrink、flex-grow， flex-shrink、flex均用於指定或調整子元素的寬度；為縱向排列時，則用於指定或調整子元素的高度。

flex:250px;//元素寬度為250px；

flex：1 3 250px；

• flex-wrap屬性

（1）功能

指定單行佈局或多行佈局

（2）屬性值

nowrap：不換行。               wrap：換行。

wrap-reverse：雖然換行，但是換行方向與使用wrap樣式屬性值時的換行方向相反。

#container{

display：flex；

border:solid 5px blue;

flex-direction:row;

flex-wrap：wrap；

}

• flex-flow屬性

可以將flex-direction屬性值與flex-wrap屬性合併書寫在該屬性中。

{

flex-direction：row；

flex-wrap：wrap；

}

等價於：

{

flex-flow：row wrap；

}

指定水平方向與垂直方向的對齊方式

• justify-content屬性

（1）功能

用於指定如何佈局容器中除了子元素之外的main axis（橫向佈局時為水平方向，縱為垂直方向）上的剩餘空白部分。

（2）當flex-grow屬性不為0時，各子元素在main axis軸方向上自動填滿容器，所以justify-content屬性值無效。

（3）屬性值

flex-start：從main-start開始佈局所有子元素（預設）

flex-end：從main-end開始佈局所有子元素。

center：居中佈局所有子元素。

space-between：將第一個子元素佈局在main-start處，將最後一個子元素佈局在main-end處，將空白部分平均分配在所有子元素與子元素之間。

space-around：將空白部分平均分配在以下幾處，如main-start與第一個子元素之間、各子元素與子元素之間、最後一個子元素與main-end之間。

#content{ 

display：flex；

border：solid 5px blue；

flex-direction：row；

width：600px；

height：30px；

justify-content：flex-start；

}

• align-items屬性

（1）功能

用於指定子元素對齊方式，指定的是cross axis軸方向（橫為垂直，縱為水平）。（容器元素的樣式屬性）

（2）屬性值

flex-start：從cross-start開始佈局所有子元素（預設）

flex-end：從cross-end開始佈局所有子元素。

center：居中佈局所有子元素。

baseline：如果子元素的佈局方向與容器的佈局方向不一致，則該值得作用等效於flex-start屬性值的作用。否則，所有子元素中的內容沿基線對齊。

stretch：同一行中的所有子元素高度被調整為最大。如果未指定任何子元素高度，則所有子元素高度被調整為最接近容器高度（當考慮元素邊框及內邊距時，當邊框寬度與內邊距均為0則等於容器高度）。

#content{ 

display：flex；

border：solid 5px blue；

flex-direction：row；

width：600px；

align-items：flex-start；

}

• align-self屬性

（1）功能

用於單獨指定某些子元素的對齊方式。

（2）屬性值

auto：繼承父元素的align-items屬性值。

其他可指定屬性值同align-items屬性的可指定屬性值。

• align-content 屬性

（1）功能

在進行多行佈局時，可以使用該屬性指定各行對齊方式。

（2）屬性值

flex-start：從cross-start開始佈局所有子元素（預設）

flex-end：從cross-end開始佈局所有子元素。

center：居中佈局所有子元素。

space-between：將第一行佈局在cross-start處，將最後一行佈局在cross-end處，將空白部分平均分配在各行之間。

space-around：將空白部分平均分配在以下幾處，如cross-start與第一行之間、各行與子元素行之間、最後一行與cross-end之間。

#content{ 

display：flex；

border：solid 5px blue；

flex-direction：row；

flex-wrap：wrap；

width：300px；

height：400px；

align-conten：flex-start；

}

4 calc方法

（1）作用

可以通過該方法來自動計算元素的寬度、高度等數值型別的樣式屬性值。

（2）瀏覽器支援

到目前為止：Safari6以上、Chrome19以上 、Firefox8以上、Opera12以上、IE9以上瀏覽器支援該方法。 

#container{

width：500px；

background-color：pink；

}

#foo{

width：calc（50%-100px）；

background-color：green；

}

（3）可以用來對各種不同的計數單位進行混合運算

#container{

height：calc（10em+3px）；

}