CSS3布局之多欄布局&盒布局&彈性盒布局&calc方法的用法總結

本篇文章給大家帶來的內容是關於CSS3布局之多欄布局&盒布局&彈性盒布局&calc方法的用法總結，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

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）當有一個容器元素，元素中有三個p元素，只對容器元素指定了寬度和高度，結果當排列方向被指定為水平方向時，三個元素的寬度為元素中內容的寬度，高度自動變為容器的高度，當排列方向被指定為垂直方向時，三個元素的高度為元素中內容的高度，寬度自動變為容器的寬度。（存在大片空白地區）

使用彈性盒布局來消除空白

（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）；}