CSS3布局實(shí)現(xiàn)多欄布局&盒布局&彈性盒布局&calc的方法

CSS3布局實(shí)現(xiàn)多欄布局&盒布局&彈性盒布局&calc的方法？相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

1 多欄布局

使用多欄布局可以將一個(gè)元素中的內(nèi)容分為兩欄或多欄顯示，并且確保各欄中內(nèi)容的底部對齊。

column-count屬性

在CSS3中，通過該屬性來使用多欄布局方式，該屬性的含義是將一個(gè)元素中的內(nèi)容分為多欄進(jìn)行顯示。

（1）瀏覽器書寫

Firefox：“-moz-column-count”

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

IE中不需添加前綴。

（2）使用多欄布局時(shí)，需要將元素的寬度設(shè)置成多個(gè)欄目的總寬度。

column-width屬性

也可以使用該屬性單獨(dú)設(shè)置每一欄的寬度而不設(shè)定元素的寬度。

（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）使用該屬性指定每欄寬度而不設(shè)定元素的寬度，則需要在元素外面單獨(dú)設(shè)立一個(gè)容器元素，然后指定該容器元素的寬度，否則指定的每欄寬度被瀏覽器視為未作設(shè)定。

column-gap屬性

（1）功能

設(shè)定多欄之間的間隔距離

（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）功能

在欄與欄之間增加一條間隔線，并且設(shè)定該間隔線的寬度、顏色等。（與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）盒布局與多欄布局的區(qū)別

1. 使用多欄布局時(shí)，各欄寬度必須是相等的，在指定每欄寬度時(shí)，也只能為所有欄指定一個(gè)統(tǒng)一的寬度，欄與欄之間的寬度不可能是不一樣的。

2.使用多欄布局時(shí)，也不可能具體指定什么欄中顯示什么內(nèi)容，因此比較適合使用在顯示文章內(nèi)容的時(shí)候，不適合用于安排整個(gè)網(wǎng)頁中由各元素組成的頁面結(jié)構(gòu)的時(shí)候。

3 彈性盒布局

如果想讓三個(gè)div元素的總寬度等于瀏覽器窗口的寬度，而且能夠隨著窗口寬度的改變而改變時(shí)，該怎么設(shè)定呢？

flex屬性

使盒布局變?yōu)?span>彈性盒布局

#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）功能

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

#container{
display：flex；
}
#left-sidebar{
order：3；
}
#contents{
flex：1；
order：1；
}
#right-sidebar{
order：2；
}

flex-direction屬性

（1）功能

改變元素的排列方向。

（2）值

row：橫向排列（默認(rèn)值）。row-reverse：橫向反向排列。

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

#container{
display：flex；
flex-direction：column；
}

元素高度與寬度的自適應(yīng)

（1）使用盒布局的時(shí)候，元素的高度與寬度具有自適應(yīng)性，即元素的寬度與高度可以根據(jù)排列方向的改變而改變。

（2）當(dāng)有一個(gè)容器元素，元素中有三個(gè)p元素，只對容器元素指定了寬度和高度，結(jié)果當(dāng)排列方向被指定為水平方向時(shí)，三個(gè)元素的寬度為元素中內(nèi)容的寬度，高度自動變?yōu)槿萜鞯母叨?/span>，當(dāng)排列方向被指定為垂直方向時(shí)，三個(gè)元素的高度為元素中內(nèi)容的高度，寬度自動變?yōu)槿萜鞯膶挾?/span>。（存在大片空白區(qū)域）

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

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

#container{
display：flex；
}
#contents{
flex：1；
}

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

（2）可對多個(gè)元素使用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屬性關(guān)系

當(dāng)元素排列方向?yàn)闄M向排列時(shí)：如果子元素的width樣式屬性值的總和小于容器元素的寬度值，必須通過flex-grow屬性（加上加權(quán)空白）來調(diào)整子元素寬，若大于則必須通過flex-shrink屬性（減去加權(quán)超出部分）來調(diào)整子元素寬度。

當(dāng)元素排列方向?yàn)榭v向排列時(shí)：如果子元素的height樣式屬性值的總和小于容器元素的高度值，必須通過flex-grow屬性來調(diào)整子元素寬，若大于則必須通過flex-shrink屬性來調(diào)整子元素寬度。

結(jié)果：參與排列的元素的總寬度與總高度始終等于容器的寬度和高度

#container{
display：flex；
flex-direction：row；
}
#left-sidebar{
flex-shrink：1；
}
#contents{
flex-shrink：1；
}
#right-sidebar{
flex-shrink：3；
}

flex-basis屬性

（1）功能

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

屬性合并

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

（2）不指定flex-grow， flex-shrink時(shí)，默認(rèn)樣式屬性值為1；flex-grow， flex-shrink 默認(rèn)樣式值為 0px；

（3）子元素為橫向排列時(shí)，flex-grow， flex-shrink、flex-grow， flex-shrink、flex均用于指定或調(diào)整子元素的寬度；為縱向排列時(shí)，則用于指定或調(diào)整子元素的高度。

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

flex-wrap屬性

（1）功能

指定單行布局或多行布局

（2）屬性值

nowrap：不換行。               wrap：換行。

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

#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；
}
等價(jià)于：
{
flex-flow：row wrap；
}

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

justify-content屬性

（1）功能

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

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

（3）屬性值

flex-start：從main-start開始布局所有子元素（默認(rèn)）

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

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

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

space-around：將空白部分平均分配在以下幾處，如main-start與第一個(gè)子元素之間、各子元素與子元素之間、最后一個(gè)子元素與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開始布局所有子元素（默認(rèn)）

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

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

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

stretch：同一行中的所有子元素高度被調(diào)整為最大。如果未指定任何子元素高度，則所有子元素高度被調(diào)整為最接近容器高度（當(dāng)考慮元素邊框及內(nèi)邊距時(shí)，當(dāng)邊框?qū)挾扰c內(nèi)邊距均為0則等于容器高度）。

#content{ 
display：flex；
border：solid 5px blue；
flex-direction：row；
width：600px；
align-items：flex-start；
}

align-self屬性

（1）功能

用于單獨(dú)指定某些子元素的對齊方式。

（2）屬性值

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

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

align-content 屬性

（1）功能

在進(jìn)行多行布局時(shí)，可以使用該屬性指定各行對齊方式。

（2）屬性值

flex-start：從cross-start開始布局所有子元素（默認(rèn)）

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）作用

可以通過該方法來自動計(jì)算元素的寬度、高度等數(shù)值類型的樣式屬性值。

（2）瀏覽器支持

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

#container{
width：500px；
background-color：pink；
}
#foo{
width：calc（50%-100px）；
background-color：green；
}

（3）可以用來對各種不同的計(jì)數(shù)單位進(jìn)行混合運(yùn)算

#container{
height：calc（10em+3px）；
}

看完上述內(nèi)容，你們掌握CSS3布局實(shí)現(xiàn)多欄布局&盒布局&彈性盒布局&calc的方法的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！