CSS3彈性盒子基礎(chǔ)知識有哪些

本篇內(nèi)容主要講解“CSS3彈性盒子基礎(chǔ)知識有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“CSS3彈性盒子基礎(chǔ)知識有哪些”吧!

　　一、簡單介紹

　　??彈性盒模型( Flexible Box或FlexBox)是一個CSS3新增布局模塊，官方稱為CSS Flexible Box Layout Module，用于實現(xiàn)容器里項目的對齊、方向、排序(即使在項目大小位置、動態(tài)生成的情況), 分配空白空間 。彈性盒模型最大的特性在于，能夠動態(tài)修改子元素的寬度和高度，以滿足在不同尺寸屏幕下的恰當(dāng)布局。

　　二、基本知識

　　??彈性盒子是由彈性容器(flex container)和彈性子元素(flex item)組成，彈性盒子有一個主軸(main axis)和一個縱軸(cross axis)，彈性子元素沿著主軸依次排列 ，側(cè)軸垂直于主軸。彈性容器的主軸開始(main start)、主軸結(jié)束(main end)和側(cè)軸開始(cross start)、側(cè)軸結(jié)束(cross end)代表了彈性子元素排列的起始和結(jié)束位置。具體可以看下面的圖。

　　三、屬性分類

　　1. 彈性容器的相關(guān)屬性

　　屬性屬性說明

　　flex-direction設(shè)置主軸方向，確定彈性子元素的排列方式

　　flex-wrap當(dāng)彈性子元素超出彈性容器范圍時是否換行

　　flex-flowflex-direction和flex-wrap的快捷方式，復(fù)合屬性

　　justify-content設(shè)置彈性子元素主軸上的對齊方式

　　align-items設(shè)置彈性子元素側(cè)軸上的對齊方式

　　align-content側(cè)軸上有空白時且有多行時，設(shè)置彈性子元素側(cè)軸的對齊方式

　　a. flex-direction屬性

　　使用方法：flex-direction:row |row-reverse |column |column-reverse

　　屬性值含義

　　row(默認(rèn)值)主軸為水平方向。排序方向與頁面的文檔順序相同。如果文檔順序是ltr，則排列順序是從左到右;如果文檔順序是rtl，則排列順序是從右到左。

　　row-reverse主軸為水平方向。排序方向與頁面的文檔順序相反。

　　column主軸為垂直方向。排列順序為從上到下

　　column-reverse主軸為垂直方向。排列順序為從下到上

　　其屬性的效果圖如下：

　　b. flex-wrap屬性

　　使用方法：flex-wrap: nowrap | wrap | wrap-reverse

　　屬性值含義

　　nowrap(默認(rèn)值)溢出時不換行

　　wrap溢出時自動換行

　　wrap-reverse溢出時自動換行，翻轉(zhuǎn)排列

　　其效果圖如下：

　　c. flex-flow屬性

　　使用方法：flex-flow: [flex-direction] || [flex-wrap]

　　含義：復(fù)合屬性(flex-direction和flex-wrap)，設(shè)置彈性子元素的排列方式

　　d. justify-content屬性

　　使用方法：justify-content: flex-start | flex-end | center | space-between | space-around

　　屬性值含義

　　flex-start(默認(rèn)值)主軸開始對齊，主軸為橫軸，ltr環(huán)境下，左對齊

　　flex-end主軸結(jié)束對齊，主軸為橫軸，ltr環(huán)境下，右對齊

　　center居中對齊

　　space-between第一個、最后一個對齊彈性容器的邊緣，其余均勻分布

　　space-around全部均勻分布

　　其效果圖如下：

　　e. align-items屬性

　　使用方法：align-items: flex-start | flex-end | center | baseline | stretch

　　屬性值含義

　　flex-start側(cè)軸開始對齊，主軸為橫軸，頂對齊

　　flex-end側(cè)軸結(jié)束對齊

　　center居中對齊

　　baseline基線對齊

　　stretch(默認(rèn)值)從側(cè)軸開始到側(cè)軸結(jié)束鋪滿整個側(cè)軸

　　其效果圖如下：

　　f. align-content屬性

　　使用方法：align-content: flex-start | flex-end | center | space-between | space-around | stretch

　　屬性值含義

　　flex-start主軸開始對齊，主軸為橫軸，ltr環(huán)境下，左對齊

　　flex-end主軸結(jié)束對齊，主軸為橫軸，ltr環(huán)境下，右對齊

　　center居中對齊

　　space-between第一個、最后一個對齊彈性容器的邊緣，其余均勻分布

　　space-around全部均勻分布

　　stretch(默認(rèn)值)各行伸展以占用剩余空間。如果剩余空間是負(fù)數(shù)，該值等效于flex-start

　　其效果圖如下：

　　2. 彈性子元素的相關(guān)屬性

　　屬性值含義

　　order控制彈性容器里子元素的順序，數(shù)值小的排在前面，可以為負(fù)值

　　flex-grow設(shè)置彈性子元素的擴展比率

　　flex-shrink設(shè)置彈性子元素的收縮比率

　　flex-basis指定彈性子元素伸縮前的默認(rèn)大小值，相當(dāng)于width和height屬性

　　flexflex-grow，flex-shrink和flex-basis屬性的復(fù)合屬性

　　align-self允許獨立的彈性子元素覆蓋彈性容器的默認(rèn)對齊設(shè)置(align-items)

　　a. order屬性

　　使用方法：order: integer number

　　其屬性效果圖如下：

　　b. flex-grow屬性

　　使用方法：flex-grow: number

　　含義：設(shè)置彈性子元素的擴展比率，不允許為負(fù)值，默認(rèn)值為0。根據(jù)彈性盒子元素所設(shè)置的擴展因子作為比率來分配剩余空間。

　　其屬性效果圖如下：

　　c. flex-shrink屬性

　　使用方法：flex-shrink: number

　　含義：設(shè)置彈性子元素的收縮比率，不允許為負(fù)值，默認(rèn)值為1。根據(jù)彈性盒子元素所設(shè)置的擴展因子作為比率來收縮空間。

　　其屬性效果圖如下：

　　d. flex-basis屬性

　　使用方法：flex-basis: | | auto

　　含義：設(shè)置彈性子元素的伸縮基準(zhǔn)值，不允許為負(fù)值。默認(rèn)值為auto，無特定寬度(高度)。

　　e. flex屬性

　　使用方法：flex: none | [flex-grow] || [flex-shrink] || [flex-basis

　　含義：復(fù)合屬性，設(shè)置彈性子元素的如何分配空間

　　f. align-self屬性

　　使用方法：auto | flex-start | flex-end | center | baseline | stretch

　　含義：設(shè)置彈性子元素的在側(cè)軸上的對齊方式，與align-items相同。設(shè)置某個彈性子元素的對立對齊方式。

　　其屬性效果圖如下：

　　3. 多列屬性詳解

　　1)基礎(chǔ)知識

　　??多列(Multi-column)是一個CSS3新增布局模塊，官方稱為Multiple column layout，可以比較輕松的實現(xiàn)多列布局，比如圖片瀑布流。

　　2)屬性一覽

　　屬性屬性說明

　　columns復(fù)合屬性(column-width和column-count)，設(shè)置寬度和列數(shù)

　　column-width設(shè)置每列的寬度

　　column-count設(shè)置列數(shù)

　　column-gap設(shè)置列之間的間隙

　　column-rule復(fù)合屬性(column-rule-width、column-rule-style和column-rule-color)，設(shè)置列之間的邊框樣式

　　column-fill設(shè)置列的高度是否統(tǒng)一

　　column-span設(shè)置是否橫跨所有列

　　a. column-width屬性

　　使用方法：column-width: length | auto

　　屬性值含義

　　auto(默認(rèn)值)瀏覽器決定列的寬度

　　length用長度值來定義列寬。不允許負(fù)值

　　b. column-count屬性

　　使用方法： column-count: integer number | auto

　　屬性值含義

　　auto(默認(rèn)值)列數(shù)將取決于其他屬性，例如："column-width"

　　imteger number用整數(shù)值來定義列數(shù)，列的最佳數(shù)目將其中的元素的內(nèi)容無法流出。

　　c. columns屬性

　　使用方法：columns: [column-width]|[column-count]

　　含義：復(fù)合屬性設(shè)置列的寬度和個數(shù)

　　d. column-gap屬性

　　使用方法：column-gap: length | normal

　　屬性值含義

　　normal(默認(rèn)值)與font-size大小相同。假設(shè)該對象的font-size為16px，則normal的值為16px，以此類推。

　　length用長度來定義列與列之間的間隙。不允許為負(fù)值。

　　e. column-rule屬性

　　使用方法：column-rule: [column-rule-width] || [column-rule-style] || [column-rule-color]

　　含義：設(shè)置列與列之間的邊框，和border屬性相似

　　屬性值含義

　　column-rule-width設(shè)置列與列之間的邊框的厚度

　　column-rule-style設(shè)置列與列之間的邊框的樣式

　　column-rule-color設(shè)置列與列之間的邊框的顏色

　　f. column-fill屬性

　　使用方法：column-fill: auto | balance

　　含義：設(shè)置所有列的高度是否統(tǒng)一

　　屬性值含義

　　auto(默認(rèn)值)列高度自適應(yīng)內(nèi)容

　　balance所有列的高度以其中最高的一列統(tǒng)一

　　g. column-span屬性

　　使用方法：column-span: none | all

　　含義：對象元素是否橫跨所有列

　　屬性值含義

　　none(默認(rèn)值)不跨列

　　all橫跨所有列

到此，相信大家對“CSS3彈性盒子基礎(chǔ)知識有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！