1.基本概念

flex布局是一種布局模型，經(jīng)常被稱(chēng)之為flexbox，使用flex布局之后，他會(huì)給子元素提供強(qiáng)大空間分配和對(duì)齊能力。

            

在沒(méi)有使用flex布局之前，常用布局有：流式布局，浮動(dòng)布局，定位布局等等。缺陷是子元素需要自己控制自己在父元素中的位置，還要注意父元素高度坍塌。

            

flex的優(yōu)點(diǎn)就是避免不靈活的布局形式，創(chuàng)建更多種布局模式供你選擇，解決了子元素的對(duì)齊和分布與 響應(yīng)式等問(wèn)題。缺點(diǎn)是只能依靠自身的布局模式，稍有變化則無(wú)法改變。 

2.flex的指定

 （1）display屬性

給任意元素聲明display：flex或者聲明display：inline-flex（保持內(nèi)聯(lián)特性，用的很少）都會(huì)創(chuàng)建彈性布局。 

如果你使用flex，那么你先要知道布局結(jié)構(gòu)

給外層元素定義flex，把外層元素當(dāng)“容器”元素，來(lái)控制其內(nèi)部的子項(xiàng)元素“項(xiàng)目”的排列方式

                

（2）注意事項(xiàng)

依靠容器元素的屬性，控制的是項(xiàng)目的排列方式，也就是說(shuō)控制的不是自身，而是子元素            

設(shè)置為flex布局以后，子元素的float，clear都失效了，換言之子元素不用浮動(dòng)了，父元素也不用清除浮動(dòng)了         

設(shè)置了flex的元素，子元素會(huì)“塊狀化”。換言之，父元素使用了display：flex其子元素都會(huì)變成塊級(jí)元素。 

3.主軸的排列方向 

（1）行模式和列模式

行模式就是子元素（項(xiàng)目）在容器中以行（x軸）方向排列的模式 

列模式就是子元素（項(xiàng)目）在容器中以列（y軸）方向 

 

 4.主軸排序

主軸方向可以取四個(gè)值，注意這四個(gè)值都要在容器中寫(xiě)的

 5.換行模式

flex-wrap 屬性來(lái)控制flex子項(xiàng)（項(xiàng)目）單行顯示換行和不換行，默認(rèn)情況不換行，即使容器無(wú)法承受所有項(xiàng)目，他們會(huì)按照等比例壓縮，強(qiáng)制在主軸方向顯示。

 6.主軸上的對(duì)齊方向

justify-content  定義了項(xiàng)目在主軸方向上的對(duì)齊方式，需要注意的是，要區(qū)別行模式和列模式，當(dāng)然主要可以以行模式為例。

 

7.交叉軸對(duì)齊方式

 align-items指的是交叉軸的對(duì)齊方式，如果沒(méi)有指定交叉軸對(duì)齊方式默認(rèn)是 normal 項(xiàng)目無(wú)高度，默認(rèn)撐滿(mǎn)容器高度。

 

8.多軸線(xiàn)對(duì)齊 

align-content屬性設(shè)置瀏覽器如何沿著彈性布局的橫縱項(xiàng)，多軸線(xiàn)分布的空間方式。

9.多軸線(xiàn)對(duì)齊 

（1）項(xiàng)目的排序順序

order項(xiàng)目在布局時(shí)的順序，數(shù)值越小,，排列越靠前，默認(rèn)值為0，可以是負(fù)數(shù)，數(shù)值沒(méi)有單位。

（2）項(xiàng)目的增長(zhǎng)規(guī)則：flex-grow規(guī)定了項(xiàng)目在flex容器中分配剩余空間的比例。負(fù)值無(wú)效，默認(rèn)值0，數(shù)值不需要單位。

flex給某項(xiàng)目，前提容器中主軸方向是有剩余空間的

項(xiàng)目本身是有自己的尺寸的，不放大時(shí)使用自身的長(zhǎng)度尺寸。如：寬度設(shè)置了增長(zhǎng)規(guī)則之后，原本尺寸失效了，使用增長(zhǎng)規(guī)則的系數(shù)

剩余空間的比重分配，是所有項(xiàng)目的flex-grow系數(shù)相加，之后再按比例分配

（3）項(xiàng)目的收縮規(guī)則

 flex-shrink指定了flex項(xiàng)目的收縮規(guī)則，默認(rèn)值1，不允許負(fù)值，沒(méi)有任何單位

收縮前提，容器中無(wú)剩余空間，項(xiàng)目才會(huì)被壓縮            

設(shè)置了收縮比例后，元遲勛會(huì)在壓縮時(shí)失效，而使用收縮系數(shù)                  

收縮數(shù)值越大，壓縮比例就越大             

壓縮的分配比重，縮小的尺寸是所有項(xiàng)目縮小系數(shù)之和，再按比例分配   

強(qiáng)制不縮小，flex-shrink：0；

（4）項(xiàng)目的初始化規(guī)則

flex-basis指定了flex項(xiàng)目元素在主軸方向上的初始化大?。ǔ叽纾?，不允許負(fù)值，默認(rèn)auto，如果指定該屬性，則原本尺寸，將失效。

（5）項(xiàng)目的flex簡(jiǎn)寫(xiě)❤

 flex屬性指的是，增長(zhǎng)規(guī)則，縮小規(guī)則，初始化尺寸的集合寫(xiě)法。           

默認(rèn)flex：0 1 auto；                  

flex：1； 指增長(zhǎng)規(guī)則系數(shù)                      

flex：0 0 200px； 指新項(xiàng)目在容器中不放大，也不縮小，初始化尺寸200px

【總結(jié)】         

用于容器的屬性

display：flex 指定flex布局                       

flex-direction 主軸的排序（主軸方向），默認(rèn)值row                        

flex-warp：nowarp 項(xiàng)目在容器中是否換行顯示，常用之warp                        

justify-content 主軸的對(duì)齊方式                        

align-items交叉軸的對(duì)齊方式（一般用于單軸線(xiàn)）                        

align-content多軸線(xiàn)對(duì)齊方式

用于項(xiàng)目的屬性

order：0項(xiàng)目的排序                       

flex-grow：0放大規(guī)則，默認(rèn)0，不放大                      

flex-shrink：1 收縮規(guī)則，默認(rèn)1，縮??；0，不縮小。                        

flex-basis：200px 指定主軸長(zhǎng)度尺寸，不允許負(fù)值，默認(rèn)值auto，優(yōu)先級(jí)比主軸的尺寸高    

flex集合寫(xiě)法，放大，縮小，初始尺寸，默認(rèn)0  1  auto。flex：1指放大，flex：0  0不放大不縮小    

————————————————

版權(quán)聲明：本文為CSDN博主「Caleb-niu」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/weixin_48576413/article/details/124881408