CSS3彈性盒子基礎(chǔ)知識(shí)有哪些-創(chuàng)新互聯(lián)

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

成都創(chuàng)新互聯(lián)長(zhǎng)期為數(shù)千家客戶(hù)提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為沛縣企業(yè)提供專(zhuān)業(yè)的成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)，沛縣網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

一、簡(jiǎn)單介紹

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

二、基本知識(shí)

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

三、屬性分類(lèi)

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

屬性屬性說(shuō)明

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

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

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

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

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

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

a. flex-direction屬性

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

屬性值含義

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

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

column主軸為垂直方向。排列順序?yàn)閺纳系较?/p>

column-reverse主軸為垂直方向。排列順序?yàn)閺南碌缴?/p>

其屬性的效果圖如下：

b. flex-wrap屬性

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

屬性值含義

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

wrap溢出時(shí)自動(dòng)換行

wrap-reverse溢出時(shí)自動(dòng)換行，翻轉(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)值)主軸開(kāi)始對(duì)齊，主軸為橫軸，ltr環(huán)境下，左對(duì)齊

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

center居中對(duì)齊

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

space-around全部均勻分布

其效果圖如下：

e. align-items屬性

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

屬性值含義

flex-start側(cè)軸開(kāi)始對(duì)齊，主軸為橫軸，頂對(duì)齊

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

center居中對(duì)齊

baseline基線對(duì)齊

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

其效果圖如下：

f. align-content屬性

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

屬性值含義

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

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

center居中對(duì)齊

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

space-around全部均勻分布

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

其效果圖如下：

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

屬性值含義

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

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

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

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

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

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

a. order屬性

使用方法：order: integer number

其屬性效果圖如下：

b. flex-grow屬性

使用方法：flex-grow: number

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

其屬性效果圖如下：

c. flex-shrink屬性

使用方法：flex-shrink: number

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

其屬性效果圖如下：

d. flex-basis屬性

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

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

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è)軸上的對(duì)齊方式，與align-items相同。設(shè)置某個(gè)彈性子元素的對(duì)立對(duì)齊方式。

其屬性效果圖如下：

3. 多列屬性詳解

1)基礎(chǔ)知識(shí)

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

2)屬性一覽

屬性屬性說(shuō)明

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用長(zhǎng)度值來(lái)定義列寬。不允許負(fù)值

b. column-count屬性

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

屬性值含義

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

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

c. columns屬性

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

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

d. column-gap屬性

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

屬性值含義

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

length用長(zhǎng)度來(lái)定義列與列之間的間隙。不允許為負(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

含義：對(duì)象元素是否橫跨所有列

屬性值含義

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

all橫跨所有列

到此，相信大家對(duì)“CSS3彈性盒子基礎(chǔ)知識(shí)有哪些”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)建站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！

網(wǎng)頁(yè)題目：CSS3彈性盒子基礎(chǔ)知識(shí)有哪些-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://muchs.cn/article16/cedjdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷(xiāo)、網(wǎng)站制作、品牌網(wǎng)站設(shè)計(jì)、軟件開(kāi)發(fā)、網(wǎng)站排名、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)