flex基礎(chǔ)布局詳解

nemo 發(fā)布于2019-08-30 15:53 / 1153人閱讀

摘要：系統(tǒng)性的介紹關(guān)于布局，也作為自學(xué)的一篇文章基礎(chǔ)理念使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充屏幕可用空間。屬性一個布局的頁面所具有的元素可分為類。每行第一個元素與行首對齊，每行最后一個元素與行尾對齊。

flex-tutorials

系統(tǒng)性的介紹關(guān)于flex布局，也作為自學(xué)的一篇文章

flex基礎(chǔ)理念

使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充屏幕可用空間。一個彈性框容器將延展它的子元素以填充可用空間，并且縮小它的子元素來避免溢出。

flex屬性

一個flex布局的頁面所具有的元素可分為2類。
1、彈性容器
2、彈性元素（包含在彈性容器內(nèi)的元素）

彈性容器

彈性容器擁有橫軸(main)和縱軸(cross)2種方向來決定著整體flex布局的流向，默認(rèn)布局：橫軸從左(main start)到右(main end)，縱軸從上(cross start)到下(cross end)

圖片來自MDN

彈性容器還有相應(yīng)的CSS屬性

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

flex-direction

指定了內(nèi)部元素是如何在 flex 容器中布局的，定義了主軸的方向(正方向或反方向)。

可選值有4種
row：默認(rèn)，保持原布局不變，按照橫軸方向布局，即從左(main start)到右(main end)
row-reverse：按照橫方向布局，置換橫默認(rèn)方向，即從右(main end)到左(main start)
column： 按照縱軸默認(rèn)方向布局，即從上(cross start)到下(cross end)
column-reverse：按照縱軸方向布局，置換縱軸默認(rèn)方向，即從下(cross start)到上(cross end)

demo

注：flex-direction的值即為整個flex布局的主軸，flex-direction:row | row-reverse則于橫軸為主軸，flex-direction:column | column-reverse則于縱軸為主軸，另外的為側(cè)軸

flex-wrap

指定 flex 元素單行顯示還是多行顯示。如果允許換行，這個屬性允許你控制行的堆疊方向

可選值有3種
nowrap： 默認(rèn)，單行顯示，假如寬度溢出，則自動壓縮相應(yīng)元素的寬度（壓縮比例與flex-shrink相關(guān)），保持單行
wrap： 多行顯示，假如寬度溢出，自動換行
wrap-reverse：多行顯示，置換側(cè)軸的方向

demo

flex-flow

flex-direction 和 flex-wrap 的簡寫

.class{
    flex-flow: column-reverse wrap;/*默認(rèn)屬性*/
}

justify-content

屬性定義彈性元素在主軸方向的排列

可選值有5個

flex-start： 默認(rèn)值，按照主軸方向進(jìn)行排列
flex-end： 置換主軸方向進(jìn)行排列
center： 向中點居中排列
space-between： 在主軸上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素與行首對齊，每行最后一個元素與行尾對齊。
space-around：在主軸上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素到行首的距離和每行最后一個元素到行尾的距離將會是相鄰元素之間距離的一半。

demo1
demo2

align-items

屬性定義了彈性元素在側(cè)軸方向的排列

可選值有5個
flex-start： 默認(rèn)值，按照側(cè)軸方向排列
flex-end： 置換側(cè)軸方向進(jìn)行排列，主軸不變
center： 向中點居中排列
baseline： 所有元素向基線對齊。側(cè)軸起點到元素基線距離最大的元素將會于側(cè)軸起點對齊以確定基線(不是很明白，MDN上面的解釋)
stretch：拉伸彈性元素，填充側(cè)軸空間

demo

align-content

屬性定義了當(dāng)彈性元素超過一行時，元素在縱軸上的排列方式

可選值有6個
flex-start： 默認(rèn)值，緊貼前一行，第一行緊貼邊緣，與主軸排列方式有關(guān)
flex-end： 置換側(cè)軸方向進(jìn)行排列，緊貼前一行
center： 向中點居中排列，緊貼前一行
space-between： 所有行在容器中平均分布。相鄰兩行間距相等。容器的垂直軸起點邊和終點邊分別與第一行和最后一行的邊對齊
space-around：所有行在容器中平均分布，相鄰兩行間距相等。容器的垂直軸起點邊和終點邊分別與第一行和最后一行的距離是相鄰兩行間距的一半
stretch：平均分配側(cè)軸空間，相鄰行間距相等

demo

彈性元素

包含在彈性容器里的每個節(jié)點都可以稱為彈性元素

相應(yīng)的，彈性元素也有自身的CSS屬性

order

align-self

flex-grow

flex-shrink

flex-basis

order

彈性元素根據(jù)自身order的值來進(jìn)行排序

demo

align-self

屬性和左右與align-items相同，但由于是直接作用在彈性元素上面，優(yōu)先級比align-items高

demo

flex-grow

定義彈性元素側(cè)軸拉伸因子

demo

flex-shrink

與flex-grow相反，定義彈性元素的壓縮比例，當(dāng)彈性元素的總長度超過容器長度時，各自的壓縮率(默認(rèn)是1)

demo

flex-basis

用來代替width，優(yōu)先級比width高（如果flex-basis和width有一個值為auto，那么另外一個非auto優(yōu)先級更高）

demo

flex

flex-grow、flex-shrink、flex-basis的縮寫

.flex1{
    flex:none;
    /*
    相當(dāng)于
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    */
}

.flex2{
    flex:1;
    /*
    相當(dāng)于
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
    */
}

.flex3{
    flex: 1 30px;
    /*
    相當(dāng)于
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 30px;
    */
}

參考來源

MDN
W3C

GPU云服務(wù)器云服務(wù)器 flex布局 flex flex40 flex 教程

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116593.html

發(fā)表評論

登陸后可評論

0條評論

nemo

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 3575·2023-04-25 14:20
轉(zhuǎn)崗測試工作三年經(jīng)驗總結(jié)（前端開發(fā)轉(zhuǎn)測試）

閱讀 1196·2021-09-10 10:51
flex基礎(chǔ)布局詳解

閱讀 1154·2019-08-30 15:53
::after 1px 間隔線在 Safari 顯示顏色不同于其它的問題

閱讀 462·2019-08-30 15:43
Web引用中文個性字體

閱讀 2316·2019-08-30 14:13
不可錯過的Angular scrollbar library

閱讀 2797·2019-08-30 12:45
寫一個導(dǎo)航欄遇到的問題

閱讀 1206·2019-08-29 16:18
flex布局

閱讀 1165·2019-08-29 16:12

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

flex基礎(chǔ)布局詳解

相關(guān)文章