CSS3多欄布局、盒布局和彈性盒布局怎么實現

本篇內容介紹了“CSS3多欄布局、盒布局和彈性盒布局怎么實現”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

　　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：1pxsolidred；

　　-moz-column-rule：1pxsolidred；

　　-webkit-column-rule：1pxsolidred；

　　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：13250px；

　　flex-wrap屬性

　　（1）功能

　　指定單行布局或多行布局

　　（2）屬性值

　　nowrap：不換行。wrap：換行。

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

　　#container{

　　display：flex；

　　border:solid5pxblue;

　　flex-direction:row;

　　flex-wrap：wrap；

　　}

　　flex-flow屬性

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

　　{

　　flex-direction：row；

　　flex-wrap：wrap；

　　}

　　等價于：

　　{

　　flex-flow：rowwrap；

　　}

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

　　justify-content屬性

　　（1）功能

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

　　（2）當flex-grow屬性不為0時，各子元素在mainaxis軸方向上自動填滿容器，所以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：solid5pxblue；

　　flex-direction：row；

　　width：600px；

　　height：30px；

　　justify-content：flex-start；

　　}

　　align-items屬性

　　（1）功能

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

　　（2）屬性值

　　flex-start：從cross-start開始布局所有子元素（默認）

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

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

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

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

　　#content{

　　display：flex；

　　border：solid5pxblue；

　　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：solid5pxblue；

　　flex-direction：row；

　　flex-wrap：wrap；

　　width：300px；

　　height：400px；

　　align-conten：flex-start；

　　}

　　4calc方法

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

　　}

“CSS3多欄布局、盒布局和彈性盒布局怎么實現”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！