CSS的flex布局介紹

這篇文章將為大家詳細(xì)講解有關(guān)CSS中的flex布局，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

成都創(chuàng)新互聯(lián)公司致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營(yíng)銷(xiāo)，包括網(wǎng)站設(shè)計(jì)、做網(wǎng)站、SEO優(yōu)化、網(wǎng)絡(luò)推廣、整站優(yōu)化營(yíng)銷(xiāo)策劃推廣、電子商務(wù)、移動(dòng)互聯(lián)網(wǎng)營(yíng)銷(xiāo)等。成都創(chuàng)新互聯(lián)公司為不同類(lèi)型的客戶(hù)提供良好的互聯(lián)網(wǎng)應(yīng)用定制及解決方案，成都創(chuàng)新互聯(lián)公司核心團(tuán)隊(duì)十年專(zhuān)注互聯(lián)網(wǎng)開(kāi)發(fā)，積累了豐富的網(wǎng)站經(jīng)驗(yàn)，為廣大企業(yè)客戶(hù)提供一站式企業(yè)網(wǎng)站建設(shè)服務(wù)，在網(wǎng)站建設(shè)行業(yè)內(nèi)樹(shù)立了良好口碑。

flex模型擁有比較多的屬性，來(lái)設(shè)置多樣的布局方式，接下來(lái)我們就詳細(xì)介紹各種屬性對(duì)布局的改變，最后再對(duì)屬性做一個(gè)匯總

先看一下flex的基本模型，如下圖所示：

container父容器里有三個(gè)子元素flex-item。當(dāng)給父容器設(shè)置display:flex;直接子元素就有布局模型了，上圖中還有主軸和縱軸分別是布局的一個(gè)方向，后面的屬性會(huì)詳細(xì)說(shuō)到。

接下來(lái)就先從flex-container屬性開(kāi)始介紹

1.flex-container

1.1 flex-direction(主軸方向)

flex-direction:row;   （布局為一行，從start開(kāi)始排）

flex-direction:row-reverse;    (布局為一行，從end開(kāi)始排)

flex-direction:column;    (布局為一列，從start開(kāi)始排)

flex-direction:column-reverse;   (布局為一列，從end開(kāi)始排)

1.2  flex-wrap(一條軸線排不下如何換行)

flex-wrap：nowrap; (不換行，在一行顯示，即使子元素的寬度或者高度大于父元素的寬度或者高度，也在一行顯示)

flex-wrap:wrap; (內(nèi)容超過(guò)后換行)

flex-wrap:wrap-reverse; (換行后有兩條軸線，reverse就是把軸線排列的順序倒置過(guò)來(lái))

1.3 justify-content （主軸對(duì)齊方式）

justify-content:flex-start; (start側(cè)對(duì)齊，左對(duì)齊)

justify-content:flex-end;   (end側(cè)對(duì)齊，右對(duì)齊)

justify-content:center  （中心對(duì)齊）

justify-content:space-between；（左右兩側(cè)沒(méi)有間距，中間間距相同）

justify-content:space-around；    （左右兩側(cè)的間距為中間間距的一半）

1.4  align-items（交叉軸對(duì)齊方式）

align-items:stretch;   (拉伸)

align-items:flex-start;   （start側(cè)開(kāi)始，上對(duì)齊）

align-items:flex-end;    （end側(cè)開(kāi)始，下對(duì)齊）

align-items:center;         (中心對(duì)齊)

align-items:baseline;   （基線對(duì)齊）

1.5 align-content  （多根軸線對(duì)齊方式）

align-content :stretch;   (拉伸)

align-content :flex-start;   (start側(cè)開(kāi)始，上對(duì)齊)

align-content :flex-end;   （end側(cè)開(kāi)始，下對(duì)齊）

align-content :center;       (中心對(duì)齊)

align-content:space-between;  （上下沒(méi)有間距，中間各子元素間距相同）

align-content:space-around;     (上下間距之和等于中間各個(gè)間距)

2.flex-item相關(guān)屬性

flex-item中的5個(gè)屬性分別是order, flex-grow, flex-shrink, flex-basis, flex-self (分別對(duì)應(yīng)下面的0,0,1,auto,auto初始順序是123)

2.1  order(排列順序)

2.2 flex-grow（放大比例，剩余空間怎么分配,如下圖所示，剩余空間的分配比例是1:2:1）

2.3 flex-shrink （縮小比例，超出空間怎么壓縮）

2.4 flex-basis  (item所占主軸空間，優(yōu)先級(jí)高于width)

2.5  align-self  (對(duì)齊方式，取值和align相同，覆蓋align-items)

3.屬性總結(jié)

flex-container的屬性有flex-direction,  flex-wrap,  justify-content,  align-items,  align-content

flex-direction(主軸方向):  1) row（布局為一行，從start開(kāi)始排）

2) row-reverse(布局為一行，從end開(kāi)始排)

3) column(布局為一列，從start開(kāi)始排)

4) column-reverse(布局為一列，從end開(kāi)始排)

flex-wrap(一條軸線排不下如何換行)：1) nowarp (不換行，在一行顯示)

2) wrap(內(nèi)容超過(guò)后換行)

3) warp-reverse(換行后有兩條軸線，reverse就是把軸線排列的順序倒置過(guò)來(lái))

justify-content(主軸對(duì)齊方式)：1) flex-start (start側(cè)對(duì)齊，左對(duì)齊)

2) flex-end(end側(cè)對(duì)齊，右對(duì)齊)

3) center(中心對(duì)齊)

4) space-between(左右兩側(cè)沒(méi)有間距，中間間距相同)

5) justify-content:space-around（左右兩側(cè)的間距為中間間距的一半）

align-items(交叉軸對(duì)齊方式)：  1）align-items:stretch;   (拉伸)

2）align-items:flex-start（start側(cè)開(kāi)始，上對(duì)齊）

3）align-items:flex-end（end側(cè)開(kāi)始，下對(duì)齊）

4）align-content :center (中心對(duì)齊)

5）align-items:baseline（基線對(duì)齊）

align-content(多根軸線對(duì)齊方式)：  1）align-content :stretch  (拉伸)

2）align-content :flex-start  (start側(cè)開(kāi)始，上對(duì)齊)

3）align-content :flex-end（end側(cè)開(kāi)始，下對(duì)齊）

4）align-content :center  (中心對(duì)齊)

5）align-content:space-between（上下沒(méi)有間距，中間各子元素間距相同）

6）align-content:space-around  (上下間距之和等于中間各個(gè)間距)

flex-item相關(guān)屬性有order，flex-grow，flex-shrink，lex-basis，align-self

order(排列順序)

flex-grow（放大比例，剩余空間怎么分配,如下圖所示，剩余空間的分配比例是1:2:1）

flex-shrink（縮小比例，超出空間怎么壓縮）

flex-basis(item所占主軸空間，優(yōu)先級(jí)高于width)

align-self  (對(duì)齊方式，覆蓋align-items)

只要搞懂每個(gè)屬性的功能，自己在調(diào)試演示一下，flex布局應(yīng)該沒(méi)有什么問(wèn)題。

關(guān)于CSS的flex布局介紹就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

當(dāng)前題目：CSS的flex布局介紹
當(dāng)前鏈接：http://muchs.cn/article4/isppie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、網(wǎng)站收錄、網(wǎng)站維護(hù)、域名注冊(cè)、網(wǎng)站設(shè)計(jì)公司、App開(kāi)發(fā)

廣告

聲明：本網(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)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)