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

相关推荐：

css3 -webkit-flex 布局_html/css_WEB-ITnose

CSS3实现瀑布流布局的方法

以上是CSS3佈局之多欄佈局&盒子佈局&彈性盒佈局&calc方法的用法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！